Webpack Encore-模块规则-将scss变量导出/导入javascript时出错

Question

我尝试将scss / css变量导入javascript。 我偶然发现了这篇博客文章，其中使用了:export块 。

我npm install sass-loader和node-sass只是为了确保我有它们。 现在当我使用:export ，出现一个错误，告诉我sass不是有效的CSS：

$theme-colors: ( 
  "primary": #bc2a0a,
  "secondary": #4B5C74,
  ...
);

:export {
  colorPalette: $theme-colors // Error occurs because of using sass variable
}

模块构建失败：（“ primary”：＃bc2a0a，“ secondary”：＃4B5C74，...）不是有效的CSS值。

我很确定这是因为我不知道如何应用模块规则。 我当前的webpack.config.js如下所示：

let Encore = require('@symfony/webpack-encore');
let webpack = require('webpack');
const path = require('path');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .addEntry('vendors', [
        'react',
        'react-dom',
        'extend',
        'prop-types',
        'jquery',
        'ApiRouter',
        'translator',
        'moment',
        'moment-timezone',
        './vendor/boewa/glyphicons/src/css/glyphicons.css'
    ])

    .addEntry('app', [
        './assets/js/main.js',
        './assets/css/app.scss',
    ])

    .enableSassLoader()
    .enableReactPreset()

    // Some plugins
    .addPlugin(...).addPlugin(...)

    .autoProvidejQuery()

    .configureFilenames({
        images: '[path][name].[ext]',
    })
;

let config = Encore.getWebpackConfig();
config.resolve.alias = {
    'ApiRouter': 'Common/Networking/ApiRouter.js',
    'translator': 'Common/Translator.js'
};
config.resolve.modules = [
    path.resolve('./assets/js'),
    path.resolve('./node_modules')
];

module.exports = config;

那么，如何使:export起作用，以便可以在javascript中使用sass / css变量？

Answer 1

您需要在项目中将CSS模块安装为依赖项，并在webpack配置中启用它。

这是一个例子