小编taw*_*eon的帖子

Webpack 不会为生产 css 文件中的图像创建正确的路径

要将图像添加到项目中,我正在使用 sass 文件中的 content: url() css 属性并指定 src 文件夹的相对路径,例如content: url('/images/right-arrow.svg');.

问题是,在生产版本中,我需要去掉第一个斜杠才能('images/right-arrow.svg')在捆绑的 css 文件中包含这样的路径。

我可以获得所需行为的唯一方法是使用url: false选项 for css-loader,并在 sass file: 中写入不带斜杠的路径content: url('/images/right-arrow.svg'),但这样的选项不会从 node_modules 添加必要的文件,例如字体和图像。

网络包配置

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
  path: path.join(__dirname, 'public/'),
  filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
  rules: [
    {
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },

    {
      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: true …
Run Code Online (Sandbox Code Playgroud)

sass reactjs webpack css-loader

2
推荐指数
1
解决办法
1447
查看次数

标签 统计

css-loader ×1

reactjs ×1

sass ×1

webpack ×1