vue 自定义修改主题 sass 定义全局变量

最新推荐文章于 2023-04-22 11:16:45 发布

前端菜鸡

最新推荐文章于 2023-04-22 11:16:45 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： html+css javascript vue.js css

本文链接：https://blog.csdn.net/weixin_37835832/article/details/121478472

版权

本文介绍了如何在Vue项目中利用Sass自定义和切换主题颜色。通过配置v-cli3.0的node-sass和sass-loader，创建theme文件夹存储不同平台的样式。在Vuex中管理主题色，通过state和mutations实现动态切换，并在全局添加主题class以应用主题样式。

摘要由CSDN通过智能技术生成

因：sass 平台首页根据不同平台自定义样式

v-cli3.0 node-sass: 4.12.0, sass-loader: “^7.0.1”
config 文件配置项参考

css: {
   
    loaderOptions: {
   
      scss: {
   
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        // 配置项参考 https://cli.vuejs.org/zh/guide/css.html#css-modules      
        // 此处踩坑 1. `scss` 语法会要求语句结尾必须有分号