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配置中啟用它。

這是一個例子