vue-cli是快速创建Vue项目的脚手架工具（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 
  
  
  
  
  
 ”