Question

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

我的项目结构是：

dist
- bundle.js
- main.css
src
- 公共
  - 资产
    - 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;
}

这是我从webpack控制台获得的信息：

./src/public/assets/css/scss/main.scss中的
ERROR（./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）找不到模块：错误：无法解析'./../../../img/curve3.png'>在>'/ 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文件中调用背景网址？

1 个答案: