Question

我正在定义装载机：

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文件中。我在做什么错了？

Answer 1

来自official docs：

additionalData-在实际输入文件之前添加Sass / SCSS 代码。

这意味着您需要提供一个有效的SCSS字符串。

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

将变量传递到webpack中的.scss文件

1 个答案: