按网上教程配置了,但是还是一直报错,报错信息如下:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
width: $sideBarWidth !important;
^
Undefined variable: "$sideBarWidth".
百度了一波,原来是sass-loader的版本的问题
// sass 版本 9 中使用 additionalData 版本 8 中使用 prependData,其他版本,使用data
我的版本是7.1.0的,所以最后把键名改成data就就解决了
在vue.config.js中如下配置:
module.exports = {
...
css: {
// extract: true // 是否使用css分离插件 ExtractTextPlugin(开启骨架屏必须这个配置)
// css预设器配置项
// sass 版本 9 中使用 additionalData 版本 8 中使用 prependData,其他版本,使用data
//这里的分号;必填
loaderOptions: {
sass: {
data: '@import "./src/styles/variables.scss";'
}
},
},
...
},
注意:配置文件路径后面的分号;是必填的,否则会报错Media query expression must begin with ‘(’