Question

尝试在src目录下的sass文件中使用图像（background-image：url（'path_to_image'））时出现以下错误。但是，我可以从index.js调用相同的文件。我不确定Webpack配置中缺少什么。

错误

./src/sass/main.scss中的

错误（./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/sass/main.scss）找不到模块：错误：无法解析“ ../../ img / hero-small.jpg”

文件夹结构

dist
  js
  public
     css
     images

src
  img
  js
  sass
  index.js

从中调用her-small.jpg的代码

更详细的源目录结构：

img
sass
  components
     header.scss

在header.scss中，我正在呼叫

background-image: url("../../img/hero-small.jpg");

此外，输出版本css显示相同的路径

background-image: url("../../img/hero-small.jpg");

package.json

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        new ExtractTextPlugin('./public/css/main.css')
    ],
    module: {
        rules: [{
                test:/\.js$/,
                exclude: /node_modules/,
                use:[{
                loader: "babel-loader",
                query: {presets:['es2015']}
                }]
        }, {
                test:/\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({fallback:'style-loader',use:['css-loader','sass-loader']})
            },
            {
                test:/\.(png|svg|jp(e*)g|gif)$/,
                exclude:/node_modules/,
                use:[{
                    loader: "file-loader",
                    options: {
                        name:'[name].[ext]',
                        outputPath:'./public/images'
                    }
                }]
            }
        ]
    }
};

更新

基于此帖子，我还包括了一个loader：resolve-url-loader并将url的css-loader选项设置为false。

使用：ExtractTextPlugin.extract（{fallback：'style-loader'，use：[{loader：'css-loader'，options：{url：false}}，'resolve-url-loader'，'sass-加载器']}）经过进一步研究，我发现sass-loader github页面上描述的问题：

由于Sass / libsass不提供url重写，因此所有链接的资产必须相对于输出。如果您只是生成CSS而不将其传递给css-loader，则它必须相对于您的Web根目录。如果将生成的CSS传递给css-loader，则所有网址都必须相对于入口文件（例如main.scss）。第二个问题很可能会打扰您。很自然地期望相对引用将针对在其中指定的.scss文件进行解析（就像在常规.css文件中一样）。幸运的是，有两个解决方案来解决此问题：使用resolve-url-loader添加缺少的url重写。将其放在装载程序链中的sass-loader之前。图书馆作者通常提供一个变量来修改资产路径。例如，bootstrap-sass具有$ icon-font-path。

使用：ExtractTextPlugin.extract（{fallback：'style-loader'，use：[{loader：'css-loader'，options：{url：false}}，'resolve-url-loader'，'sass-加载器']}）添加以上更改后，构建通过，但输出dist文件夹中的最终URL与我在源文件夹（../../img/hero.jpg）中提供的路径相同，这导致路径错误。

作为临时解决方案：

我已将图像导入到我的index.js文件中，并让文件加载器将图像从我的src目录加载到dist / public / images目录。我从dist / public / images引用了main.sass中的图像，希望它可以使用。尽管这不是万无一失的解决方案，但我希望已经有了一个我不知道的更简单的解决方案。非常感谢您对此提供任何帮助。

Webpack：css-loader无法解析网址

0 个答案: