problem description
add a processor to the scss/sass file in the webpack configuration file and introduce the global sass variable, but use the variable in the vue template to indicate that the variable does not exist
the environmental background of the problems and what methods you have tried
the development environment is Win10x64 webpack3.5 vue2.5.3 npm5.6 and related plug-ins such as vue-style-loader css-loader sass-loader node-sass are installed
related codes
webpack configuration file:
{
test: /\.s[ac]ss$/,
use: [
"vue-style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
data: `$color: red;`
}
}
]
},
vue template file:
<style lang="scss" scoped>
.red {
color: $color;
}
</style>