京东nutui框架自定义主题

最新推荐文章于 2025-04-14 08:23:51 发布

peade

最新推荐文章于 2025-04-14 08:23:51 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/peade/article/details/89155280

本文档介绍了如何在Vue CLI3项目中使用NutUI框架进行自定义主题的配置步骤，包括修改babel.config.js，配置vue.config.js中的webpack scss loader，创建custom_theme.scss文件，并在scss文件中应用主题变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在官方文档里给出了自定义主题的方法，文档地址。文档里没有详细说明怎么配合vue-cli3的写法。

我自己在使用的时候，摸索了好一会儿。

第一步：设置bable.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  'plugins': [
    ['@nutui/babel-plugin-separate-import', {
      'style': 'scss'   // 主要是这个地方，scss，这样可以引入scss的主题文件
    }]
  ]
}

第二步，在vue.config.js里设置webpack的scss的loader情况

css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件  
        data: `@import "./src/assets/scss/custom_theme.scss"; @import "@nutui/nutui/dist/styles/index.scss";`
      }
    }
  }

第三步：在src/assets/scss目录里写入custom_theme.scss文