问题描述
- 有一个老项目，项目中用到了
sass作为css预处理器 - 当需要穿透修改（子）组件的样式的时候
- 发现不能识别
/deep/的语法，换成::v-deep也不行
报错截图举栗子如下：
网上有很多稀奇古怪的解决方案，笔者逐一尝试，发现都不行......
解决方案
- 既然
sass语法不能使用，那就不用了呗（也不用升级版本） - 直接改成用
node-sass进行编译css即可 - 直接修改
package.json文件中的依赖，再删除node_modules文件夹 - 再
npm cache clean -f - 再重新安装依赖
yarn install即可解决问题
原package.json依赖
去除sass依赖
请看第八行
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-eslint": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"sass": "^1.25.0", // 这个不要了哦
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
新package.json依赖
换成node-sass依赖
请看第八行
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-eslint": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.9.0", // 换成这个即可
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.11"
},
至于node-sass和sass-loader的版本，大家去npm上，看哪一个下载量多，合理适当自行选择
A bad pen is better than a good memory...
