如何在 scss 文件中调用背景 url？

Question

我试图在 scss 文件中调用背景 URL 但 webapack 给我一个编译错误。

我的项目结构是：

距离
- bundle.js
- main.css
来源
- public
  - 资产
    - css
      1. scss
        
        组件
        
        myfile.scss（内部组件）
        
        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;
}

这是我从 webpack 控制台得到的：

ERROR in ./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) Module not found: Error: Can't resolve './../../../img/curve3.png' >in >'/Users/retinas/Documents/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

我的 webpack 配置：

            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

谢谢。

如何在 scss 文件中调用背景 url？

How can i call a background url in scss file?

webpack-4