6

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

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

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

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

我在用我当前的 webpack 配置实现这个指令时遇到了问题，它看起来像这样：

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选项被完全忽略了，因为我的文件没有被导入。

这是我的theme.scss文件（位于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') + '";'），但这并没有什么不同。我很惊讶我没有收到某种错误。

有什么建议么？

4

1 回答 1

6

以下配置对我有用

  {
    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);

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

于 2017-07-05T12:48:00.390 回答