Question

我有一个带类的.scss文件：

.my-class {
  background-image: url("/images/image.svg")
}

使用webpack进行构建时，我在配置中使用了publicPath。假设我的公开路径是XYZ

我想找到一种方法来查找生成的css，如下所示：

.my-class {
  background-image: url("/XYZ/images/image.svg")
}

生成的所有其他资产似乎都遵循那个publicPath变量，因此不清楚我配置错误的内容。我的配置如下：

 {
        test: /^((?!\.global).)*\.scss$/,
        use: [
          { loader: require.resolve('style-loader') },
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: true,
              importLoaders: 1,
              camelCase: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          },
          {
            loader: require.resolve('sass-loader')
          }
        ]
      },

Answer 1

您可以使用webpack注入包含scss值的publicPath变量。

在scss variable with your value的{{1}}下传递options

sass-loader

在var publicpath = "/static/images"; module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader", options :{ data:"$publicpath : "+publicpath+";$red : red;$blue:blue;" } }] }] } };或任何main.scss中，您可以访问值

.scss

Answer 2

因此，我见过的最简单的解决方法是将 css-loader 选项更新为 url: false。

这以前用 css-loader@3.4.2 对我来说是开箱即用的，但看起来你现在需要这个选项。

我的 webpack 现在看起来像这样：

...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[name]__[local]__[hash:base64:5]',
              },
              url: false, //<------------ this guy helped
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      ...
    ],
  },
...

使用publicPath配置css-loader

2 个答案: