首页 文章

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

提问于
浏览 次
0

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

问题是在 生产环境 构建中我需要摆脱第一个斜杠，在捆绑的css文件中包含这样的路径 ('images/right-arrow.svg') .

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

Webpack Config ：

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
          }
        },
        'sass-loader'
      ]
    },

    {
      test: /\.(svg|gif|png)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images'
        }

      }
    },

    {
      test: /\.(otf|woff2|ttf|eot|woff)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/'
        }
      }
    }

  ]
}

我在webpack配置中缺少什么来实现正确的工作路径？

reactjs webpack sass css-loader

2 回答

  • 1

    好的，我已经解决了这个问题 . 在@Ujin建议使用它之前，我使用resolve-url-loader没有结果 . 在他发表评论之后，我已经澄清了resolve-url-loader做了什么，并且为了解决我的问题而设计了它 . 主要问题是我错过了阅读resolve-url-loader文档的重要段落，其中说：

    在resolve-url-loader之前的加载器所需的source-maps（不管devtool） .

    另外我没有使用resolve-url-loader插件的 root 选项 . 所以， .scss 文件的webpack配置如下所示：

    test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        'css-loader',
        {
          loader: 'resolve-url-loader',
          options: {
            root: path.join(__dirname, 'src')
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sourceMapContents: false
          }
        }
      ]
    }
    回复于
  • 0

    检查documentation有关 url(...) 的问题 . 它建议使用resolve-url-loader .

    你也可以尝试使用copy-webpack-plugin

    回复于

相关问题