使用publicPath配置css-loader

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

所以我见过的解决这个问题的最简单的方法就是把你的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',
          },
        ],
      },
      ...
    ],
  },
...

Answer 2

您可以使用webpack注入一个保存publicPath值的scss变量。

在sass-loader中传递options下的scss variable with your value

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中，您可以访问该值

.h1{
    color: $red;
}
.h2{
    color: $blue;
}
.img{
    background-image: url($publicpath+"/pic.jpg");
    width: 200px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
}