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

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

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;

• 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';  /* 样式中可应用字体 */
}

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

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

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()
        })
    },
}