Vue + Scss 动态切换主题颜色实现换肤

最新推荐文章于 2024-10-29 17:32:17 发布

原创

最新推荐文章于 2024-10-29 17:32:17 发布 · 8.4k 阅读

标签

#css #vue.js #sass #前端 #npm

收录于

该博客介绍如何在Vue项目中利用Scss实现动态切换主题颜色。首先需要配置Scss，安装依赖并修改webpack配置。接着在全局引入scss，并创建包含不同主题配色的_themes.scss文件。通过js操作HTML的data-theme属性，结合_sass-resources-loader和自定义的混入器，实现颜色的动态切换。最后，通过改变data-theme值完成换肤效果。

Vue + Scss 动态切换主题颜色实现换肤

根据预设的配色方案，在前端实现动态切换系统主题颜色。

大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。

一、首先需要给项目下载配置Scss

安装依赖

npm install node-sass sass-loader --save-dev

找到build中webpack.base.conf.js,在rules中添加scss规则

{
   
   
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'v]
}

在vue文件中使用

<style lang='scss' scoped>

</style>

二、在vue项目全局中引入scss

安装 sass-resources-loader

npm install sass-resources-loader --save-dev

然后修改build中的utils.js
将

scss: generateLoaders('sass')

修改为：

scss: generateLoaders('sass').concat(
    {
   
   
        loader: 'sass-resources-loader',
        options: {
   
   
            //你自己的scss全局文件的路径
            resources: path.resolve(__dirname, '../src/style/_common.scss')
        }
    }
)