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

scss下载方式与引入方式

下载方式

​ 首先你得确定本地有下载过sass，在正式下载sass前得先下载Ruby（mac自带Ruby），sass基于Ruby语言开发而成，Ruby是后端语言的一种不多赘述，感兴趣的可以百度看看

下载Ruby官网地址:https://rubyinstaller.org/downloads/（可能需要翻墙你可以使用镜像下载）

安装Ruby过程中请注意勾选Add Ruby executables to your PATH这个是系统环境变量，指令需要它

下载完成自测CMD(控制台)指令ruby -v，下载版本最好在2.6.x以上

下载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”