版权声明:转载请注明出处链接! https://blog.csdn.net/qq_40259641/article/details/85173954
一: 安装需要用到的loader
npm i node-sass sass-loader --save-dev
二: 页面调用(注意不要漏了lang="scss",不是sass!)
<style lang="scss">//注意!这里很关键,很多配置成了不编译就是漏了lang="scss"
@import '../assets/css/index.scss';
@import '../assets/css/base.scss';
@import '../assets/css/common.scss';
</style>
编译之后可能你会有图片路径报错如下图:
是因为编译后地址改变了,我这里是把css/scss文件里面的引入图片地址的 ../../ 改成 ~~ 或 ~ .为什么改成~~,nuxt.js官网有介绍,意思是指向根目录,一个~默认也是一样的意思,我就没测试了;
三: 注意事项
1.scss文件不要有//注释;
例子:
正确: /*这里是头部*/
错误: //这里是头部
2.对语法比较严格如渐变不能少了to;
例子:
正确: background: linear-gradient(to left,#e8e8e8, white)
错误: background: linear-gradient(left,#e8e8e8, white)
3.图片这种静态文件要放在static文件夹下;
***一般注意事项看报错都能懂的,暂时我遇到就这些问题.使用less应该没那么多烦恼吧....