Nuxt.js 使用scss(sass)的方法

一: 安装需要用到的loader

npm install --save-dev node-sass sass-loader

官方文档传送门: css配置 

二: 页面调用(注意不要漏了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文件夹下,如image,sounds或html文件等;

***一般注意事项看报错都能懂的,暂时我遇到就这些问题.使用less应该没那么多烦恼吧....