vue下载sass方式

scss下载方式与引入方式
下载方式

下载sass指令

gem install sass
gem install compass
或者
npm install sass-loader --save-dev
npm install node-sass --save-dev
注:正式使用sass需要一定的webpack基础，建议新手先去看看webpack的使用

此处是原生webpack使用方式，rules的loader一定注意是sass而使用的时候是test:/.scss$/这俩区别个人认为sass更加激进去掉了{}改为缩进所以大多数人是使用的是.scss

module.exports = {
开发环境
mode: 'development',
解决问题
resolve:{
vue入口文件
alias:{
以vue结尾
'vue$': 'vue/dist/vue.js'
},
默认扩展名
extensions:['.js']
},

 入口文件
 entry: {
     '00':'./modules/00.js',
     '01':'./modules/01.js',
     '02':'./modules/02.js',
     '03':'./modules/03.js',
     '04':'./modules/04.js',
     '05':'./modules/05.js',
     '06':'./modules/06.js',
 },

  发布文件
 output: {
     filename: '[name].js'
 },

 模块
 module: {
     rules:[
         {
             test:/\.css$/,
             loader:'style-loader!css-loader'
         },
         {
             test:/\.scss$/,
             loader:'style-loader!css-loader!sass-loader'
         }
     ]
 }

}
vue中如果您使用的是cli脚手架那么在创建初期系统会询问你是否使用sass勾选后，可以直接在style标签里面加入lang="scss"就能使用了

没有使用脚手架的话，vue使用需要完成三部分

1、下载sass

npm install sass-loader --save-dev
npm install node-sass --save-dev
2、在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /.scss$/,
loaders: ['style', 'css', 'sass']
}
3、在style标签里面加入lang=“scss”