Как я могу вызвать фоновый URL в файле scss?

Question

Я пытаюсь вызвать фоновый URL в файле scss, но webapack выдает ошибку компиляции.

Структура моего проекта:

• dist
  • bundle.js
  • main.css
• src
  • public
    • активы
      • css
        1. scss
           • компоненты
           • myfile.scss (insid компоненты)
           • main.scss
      • img
      • js
    • index.html
  • app.js
• webpack.config.js

Этот код содержит ошибку:

&:after{
    content:"";
    background: url('./../../../img/curve3.png') 100%;
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    height: 170px;
}

Вот что я получил с консоли веб-пакета:

ОШИБКА в ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url-> loader! ./ node_modules / postcss-loader / src ?? postcss! ./ node_modules / sass-> loader / lib / loader.js! ./ src / public / assets / css / scss / main.scss) Модульне найдено: ошибка: Caне разрешить './../../../img/curve3.png'> в> '/ Пользователи / Сетчатки / Документы / Devloppement / static / um6 / src / public / assets / css> / scss'@ ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader! ./ node_modules / postcss-loader / src ?? postcss! ./ node_modules / sass-> loader / lib / loader.js! ./ src / public / assets / css / scss / main.scss) 23: 42-78

Мой конфиг веб-пакета:

            const path = require('path');
            const dev = process.env.NODE_ENV === 'dev';
            const ExtractTextPlugin = require("extract-text-webpack-plugin");


            module.exports = {
              mode: "development", 
              entry: "./src/app.js",
              watch: dev,


              devServer: {
                contentBase: path.resolve('./'),
                publicPath: '/assets/',
                port: 3000
              },

              output: {
                path: path.resolve(__dirname, "./dist"), 
                filename: "bundle.js"
              },

              module : {

                rules : [
                  {
                    enforce: 'pre',
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'eslint-loader',
                    }
                  },
                  {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'babel-loader',
                    }
                  },
                  {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: [
                        { loader: 'css-loader?url=false', options: { importLoaders: 1 } },
                        { loader: 'resolve-url-loader' },
                        {
                          loader: 'postcss-loader',
                          options: {
                            ident: 'postcss',
                            plugins: () => [
                              require('autoprefixer')({
                                browsers : ['last 2 versions', 'ie > 8']
                              }),
                            ]
                          }
                        },
                        'sass-loader'
                      ]
                    }) 

                  },
                  { 
                    test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'url-loader?limit=100000' 
                  }
                ]

              },
              plugins: [
                new ExtractTextPlugin({
                  filename : '[name].css',
                  disable : dev
                }),
              ]

            }

Спасибо за вашу помощь

Answer 1

Наконец-то я нашел решение проблемы, оно было в URL-пути, оно должно быть таким:

   background: url('./../../img/curve3.png') 100%;   

не так:

   background: url('./../../../img/curve3.png') 100%;   

Я должен начать сmain.scss не из myfile.scss

Спасибо.