我尝试将scss / css变量导入javascript。我偶然发现了使用this的:export
block博客文章。
我</li>
编辑npm install
和sass-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变量?