vue-cli3引入sass(.scss)样式管理、sass-resources-loader全局变量_vue3动态引入不同的css样式文件

vue-cli3引入sass(.scss)样式管理、sass-resources-loader全局变量

指南：Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网

1、安装sass、sass-resources-loader

npm install -g sass
npm install --save-dev sass-resources-loader
1
2

2、src/assets下新建文件夹styles，用于存放样式文件，新建2个scss文件：

• vars.scss（自定义基础变量，全局生效）

//使用$定义变量

$primary: #377dff;
$sidebar-submenu-shadow: 5px 0 25px rgba(141, 152, 167, 0.35);
$word-font: 'Montserrat-SemiBold', sans-serif;
1
2
3
4
5

• mixins.scss（自定义封装样式，可引入到文档中）

//使用@mixin封装样式

@mixin title-h1 {
    font-size: 14px;
    font-weight: 600;
    font-family: $word-font;  //样式中可应用变量
}

@mixin total-num {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Montserrat-Regular';  //样式中可应用字体
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3、将以上定义轻松应用到全局scss样式中

<style lang="scss">  /* 标记语言为scss */
div {
    box-shadow: $dark-shadow;  //直接书写变量
    margin: 0;
    
    h1 {
        @include title-h1;  //使用@include引入混合样式
        padding: 0;
    }
}
</style>
1
2
3
4
5
6
7
8
9
10
11

4、写入配置文件vue.config.js，否则定义无法全局生效

module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // 写入定义基础样式的2个scss文件路径
                    resources: [
                      './src/assets/styles/vars.scss',
                      './src/assets/styles/mixins.scss',
                    ]
                })
                .end()
        })
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

！重要提示：
Do not include anything that will be actually rendered in CSS, because it will be added to every imported Sass file.
全局sass文件中不要包含任何会被编译成css的代码，因为它们会被应用到每一个sass文件中