[亲测]Vue的服务端渲染Nuxt.js(SSR)使用scss(sass)的方法

版权声明：转载请注明出处链接! 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)

扫描二维码关注公众号，回复： 4939097 查看本文章

错误: background: linear-gradient(left,#e8e8e8, white)

3.图片这种静态文件要放在static文件夹下;

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