Конфигурирование css-загрузчика с publicPath - PullRequest
Новая
       76

Конфигурирование css-загрузчика с publicPath

0 голосов
/ 01 мая 2019

У меня есть файл .scss с классом: 

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

При сборке с веб-пакетом я использую 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')
          }
        ]
      },

1 Ответ

0 голосов
/ 01 мая 2019

Вы можете ввести переменную scss, которая содержит значение publicPath, с помощью веб-пакета.

Передать scss variable with your value под 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 вы можете получить доступ к значению 

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