如何解决使用Webpack Encore将YAML文件中的变量导入SASS变量时出错
在我们项目的根文件夹中,我们有一个styleguide.yml文件(包含例如颜色定义)。应该将其加载到Symfony Twig扩展以及SASS和JavaScript中(应该在一个中心位置定义颜色)。
我尝试将node-sass-yaml-importer包添加到package.json:
"dependencies": {
"node-sass-yaml-importer": "^4.0.1",},
在webpack.config.js中,我这样做:
// enables Sass/SCSS support
.enableSassLoader()
// enable autoprefixer and stuff
.enablePostCssLoader((options) => {
options.config = {
// the directory where the postcss.config.js file is stored
path: './'
};
})
.addLoader({
test: /\.scss$/,use: [
'style-loader',{
loader: 'css-loader',options: {
importLoaders: 1
},{
loader: 'sass-loader',// Apply the YAML importer via sass-loader's options.
options: {
importer: 'node-sass-yaml-importer'
},],})
执行yarn encore dev
时出现以下错误:
error in ./assets/sass/main.scss
SassError: Invalid CSS after "v": expected 1 selector or at-rule,was 'var api = require("'
on line 1 of assets/sass/main.scss
>> var api = require("!../../node_modules/style-loader/dist/runtime/injectStyle
^
是因为我使用的addLoader方法不正确吗?如何使用Webpack Encore从.yml文件导入变量?
解决方法
经过一些实验后,我找到了解决方案。在webpack.config.js中执行以下操作:
var yamlImporter = require('node-sass-yaml-importer');
Encore
// enables Sass/SCSS support
.enableSassLoader((options) => {
options.sassOptions = {
importer: yamlImporter
};
},{})
// ...
在main.scss中执行:
@import "../../styleguide.yml"
Works?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。