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

时间:2018-08-02 10:09:15

标签: javascript css symfony sass webpack-encore

我尝试将scss / css变量导入javascript。我偶然发现了使用this:export block博客文章。

</li>编辑npm installsass-loader只是为了确保我有它们。现在,当我使用node-sass时,出现一个错误,告诉我sass不是有效的CSS:

:export
  

模块构建失败:(“ primary”:#bc2a0a,“ secondary”:#4B5C74,...)不是有效的CSS值。

我很确定这是因为我不知道如何应用模块规则。我当前的$theme-colors: ( "primary": #bc2a0a, "secondary": #4B5C74, ... ); :export { colorPalette: $theme-colors // Error occurs because of using sass variable } 如下所示:

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; 起作用,以便可以在javascript中使用sass / css变量?

1 个答案:

答案 0 :(得分:1)

您需要在项目中安装CSS Modules作为依赖项,并在webpack config中启用它。

这里是example

相关问题