uni-app使用scss修改皮肤

我的uni-app换肤路。。。什么路？路漫漫其修远兮，吾将上下而求索。。。

方法1：这是我作为前端觉得前端开发者最好用的方法

• step1: 创建variables.scss文件用来添加自定义变量

$main: #3964f9;
$fff: #fff;

• step2: 在uni.scss中导入文件

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;


//自定义变量文件
@import '~@/static/style/variables.scss'

到这里第一种方法就完成了，简单高效。现在我们可以在任意的.vue文件中调用变量

方法2； 配置vue.config.js。 虽然有点麻烦，但也还能接受

• step1: 创建scss.js，定义我的主题色，方便后期调用

module.exports = {
    'themeColor': 'green',
    'fff': '#fff',  
}

• step2: 在项目根目录下创建vue.config,js文件， 文件内容

et styleVariables = require('./common/style/scss.js') // 路径自己修改
function appScssVar(oldVarString) {
    const newData = Object.keys(styleVariables).map(k => `\$${k}: ${styleVariables[k]};`).join('\n')
    // 添加样式到全局，这样不用每个页面import了  
    // oldVarString = '@import \"~@/common/style/style.scss\";'+ '\n' + oldVarString + '\n' 
    if (!newData) {
        return oldVarString
    }
    return oldVarString + '\n' + newData
}
module.exports = {
    chainWebpack: webpackConfig => {
        const cssTypes = ['vue-modules', 'vue', 'normal-modules', 'normal']
        cssTypes.forEach(type => {
            webpackConfig.module.rule('scss').oneOf(type).use('sass-loader').tap(options => {
                if (!options.sassOptions) {
                    options.sassOptions = {}
                }
                console.log(appScssVar(options.prependData))
                            //在这里引入我的style是因为我的style中使用了我自定义的变量，所以需要在变量引入完成后在使用我的样式文件
                options.prependData = appScssVar(options.prependData) + '\n' +
                    '@import \"~@/common/style/style.scss\";';
                             //根据你的版本决定用prependData 还是additionalData
                             //options.additionalData= appScssVar(options.additionalData) + '\n' +
                    '@import \"~@/common/style/style.scss\";';
                return options
            })
            webpackConfig.module.rule('sass').oneOf(type).use('sass-loader').tap(options => {
                if (!options.sassOptions) {
                    options.sassOptions = {}
                }
                options.prependData = appScssVar(options.prependData)
                return options
            })
        })
    }
}

• step3. 上面两步完成后，基本上算是完成了，现在我们可以在任意的.vue文件中调用变量

.goods-item {
    margin: 10px;
    padding: 40rpx 30rpx 40rpx 0;
    border: 1rpx solid $border;
    border-radius: 4rpx;
    display: flex; 
}

注意1， 要调用变量必须写scss.  别忘了style上添加lang='scss'， 到这里第二种方法大功告成。

踩坑日记：
sass-loader v8-，这个选项名是 "data"
sass-loader v8 中，这个选项名是 "prependData"
sass-loader v10+，这个选项名是 "additionalData"

但是这并不能满足我的需求，因为这里是需要每次启动的时候做一次编译才能生效，也就是每次修改变量后还需要启动一下程序。对我们开发者来说是没有任何问题，但是我们不能要求后端或者运维也因为用户更改皮肤而启动一次应用程序吧。

-----------------------------------分割线-------------------------------------

路还没有走完， 我的需求是用户可以自定义皮肤，上面两种方法都不能满足需求，接下来我继续寻找满足我的需求的方法。 此篇文章是我实现了上面两种方法之后写的，可能有遗漏之处， 请见谅