档案a.scss:
$myVariable:#ffffff;
文件b.scss:
@import './a.scss';
//does not work
:root{
--root-variable:$myVariable;
}
//works
.myClass{
color:$myVariable;
}
编辑器会在 b.scss 文件中看到 myVariable 的值。但是在页面上编译后,如果查看属性,它看起来像这样:
- 根变量:$ MYVARIABLE
但预计:
- 根变量:#FFFFFF
的WebPack:
{
test: /\.vue$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}
}
如何解决?
//UPDATE
我改变了问题,因为我发现了问题,但我仍然不知道如何解决它
答案 0 :(得分:0)
对于现在遇到此问题的任何人,这都是由于Sass 3.5的更改is explained here。
现在,在定义自定义CSS变量时使用Sass变量的操作需要稍有不同。这曾经起作用:
:root {
--root-variable: $myVariable;
}
但是现在您应该这样做:
:root {
--root-variable: #{$myVariable};
}