Передать переменную в файлы .s css в webpack - PullRequest
Новая
       34

Передать переменную в файлы .s css в webpack

0 голосов
/ 13 июля 2020

Я определяю свои загрузчики: 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const postcssInlineSvg = require('postcss-inline-svg');
const path = require('path');

const postcssConfig = [
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        autoprefixer(),
        postcssInlineSvg({
          path: path.resolve(__dirname, '../images'),
        }),
      ],
    },
  }
];

const CSSLoader = {
  test: /(\.css|\.scss)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: 'scss'
      }
    },
    {
      loader: 'css-loader',
      options: {
        url: false,
      },
    },
    ...postcssConfig,
    {
      loader: 'sass-loader',
      options: {
        additionalData: "'$theme:myawesometheme;'",
      },
    },
  ],
};

module.exports = {
  CSSLoader: CSSLoader,
};

Переменная не передает файлы sass, созданные с помощью этих загрузчиков. Что я делаю не так?

1 Ответ

0 голосов
/ 14 июля 2020

Из официальных документов :

additionalData - добавляет Sass / S CSS code перед фактическим файлом входа.

Это означает, что вам нужно предоставить действительную строку S CSS. 

options: {
   additionalData: "$theme: 'myawesometheme';",
   // you defining a scss variable (with the name theme) which it's value is a string of myawesometheme
},
...