Sass安装 ,配置...(vue项目中)

注意：浏览器的渲染引擎，无法识别的语言，最终sass要必须转为.css文件。需要安装：

sass-loader：把 sass编译成css （要依赖node-sass）

 node-sass：nodejs环境中将sass转css

1、先要查看node版本        

node -v

2、找对应的sass版本安装

       node-sass对应版本 ：node-sass - npm

安装的sass-loader版本：

cnpm install sass-loader@11 -S -D

安装的node-sass版本：

cnpm install node-sass@8 -S -D

3、sass目录结构设计

1）src/assets/scss下，创建～对应的.scss文件。查看：每个.scss文件的具体样式

2）main.js 引入 

import '@/assets/scss/index.scss'

3） vue.config.js 中   设置全局的变量样式和函数 。设置完成后，全局都可使用

 

css: {
    loaderOptions: {
      // 
      scss: {//新版 additionalData  旧版v8 prependData
        additionalData: `
        @import '@/assets/scss/variable.scss';
        @import '@/assets/scss/mixin.scss';
        `}}}

3、sass如何使用？

如何使用 Sass ？_yuroll的博客-CSDN博客