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”