使用 webpack 为 SCSS 添加变量 [英] Using webpack to prepend variables for SCSS

问题描述

Webpack 业余爱好者在这里...我正在尝试合并一个 theme.scss 文件以按照指定的指示来自定义 React Toolbox 使用的主题 这里，即:

Webpack amateur here... I'm trying to incorporate a theme.scss file to customize the theme used by React Toolbox by following the directions specified here, namely:

如果您使用 Webpack 作为模块打包器，那么您可能也在使用 sass-loader.我们想要做的是在每个 SASS 文件编译之前添加一堆要覆盖的变量，这可以通过 data 选项来完成.例如:

If you are using Webpack as module bundler, you are probably using sass-loader as well. What we want to do is to prepend to each SASS file compilation a bunch of variables to override and this can be done with the data option. For example:

sassLoader: { 数据: '@import "'+ path.resolve(__dirname, 'theme/_theme.scss') + '";'}

sassLoader: { data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";' }

在这种情况下，我们将主题导入预先添加到每个 SASS 编译中，以便在每个样式表中更改主颜色.

In this case we have are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet.

我在使用当前的 webpack 配置执行此指令时遇到问题，如下所示:

I'm having trouble implementing this instruction with my current webpack configuration, which looks like this:

const webpack = require('webpack');
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.join(__dirname, 'client'),
    entry: [
        './main.js',
    ],
    output: {
        path: path.join(__dirname, 'www'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                ],
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            localIdentName: "[name]--[local]--[hash:base64:8]"
                        }
                    },
                    "postcss-loader" // has separate config, see postcss.config.js nearby
                ]
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader', options: {
                                sourceMap: true,
                                data: '@import "' + path.resolve(__dirname, 'theme.scss') + '";'
                            }
                        },
                        'postcss-loader',
                        {
                            loader: 'sass-loader', options: {
                                sourceMap: true,
                                data: '@import "' + path.resolve(__dirname, 'theme.scss') + '";'
                            }
                        },
                    ],
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'style.css',
            allChunks: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
    ],
    resolve: {
        modules: [
            path.join(__dirname, 'node_modules'),
        ],
    },
};

我没有收到错误消息，但似乎 data 选项被完全忽略了，因为我的文件没有被导入.

I don't get an error, but it seems like the data option is being entirely ignored because my file does not get imported.

这是我的 theme.scss 文件(位于 client/theme.scss):

Here is my theme.scss file (located in client/theme.scss):

@import "~react-toolbox/lib/colors";

$color-primary: $palette-red-500;
$color-primary-dark: $palette-red-700;

body {
  background-color: black; //testing
}

我觉得我一定在这里做了一些愚蠢的事情，但我快把自己逼疯了.我曾尝试弄乱 theme.scss 文件的路径(将 data 属性更改为 data: '@import "' + path.resolve(__dirname, 'client/theme.scss') + '";') 但这并没有什么区别.我很惊讶我没有收到某种错误.

I feel like I must be doing something stupid here, but I'm driving myself crazy. I have tried messing with the path of the theme.scss file (changing the data attribute to data: '@import "' + path.resolve(__dirname, 'client/theme.scss') + '";') but that doesn't make a difference. I'm surprised I'm not getting an error of some kind.

有什么建议吗?

推荐答案

以下配置对我有用

  {
    test: /\.scss$/,
    include: /client/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      loader: [
        {
          loader: 'css-loader',
          query: {
            modules: true,
            sourceMap: false,
            localIdentName: '[name]_[local]_[hash:base64:5]',
          },
        },
        'postcss-loader',
        {
          loader: 'sass-loader',
          query: {
            sourceMap: false,
            data: `@import "${path.resolve(__dirname, 'client/_theme.scss')}";`
          }
        }
      ],
    }),
  },

和client/_theme.scss文件

@import "react-toolbox/lib/colors.css";

$color-primary: var(--palette-blue-500);
$color-primary-dark: var(--palette-blue-700);

我检查了 react-toolbox 库中的 colors.css 文件并使用了相同的变量名称.即 --palette-blue-500，而不是 $palette-blue-500.

I checked the colors.css file in the react-toolbox library and used the same variable names. i.e --palette-blue-500, not $palette-blue-500.

这篇关于使用 webpack 为 SCSS 添加变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！