didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
https://didi.github.io/mand-mobile
Apache License 2.0
3.46k stars 772 forks source link

vue-cli2.9.3版本 mand mobile 1.6.9,修改主题色后不生效 #359

Closed youzime closed 5 years ago

youzime commented 5 years ago

根据提供的【mand-mobile-vue-cli3-example】,也参考了官方的文档,修改无法生效。 其中.babelrc文件修改

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", {
      "libraryName": "mand-mobile",
      "libraryDirectory": "lib"
    }]
  ]

其中libraryDirectory项有疑问,如果我需要按需加载和定制主题,那么lib和components两个同时需要怎么填写

新建文件theme.styl文件

@import '~mand-mobile/components/_style/global'
@import '~mand-mobile/components/_style/mixin/util'
@import '~mand-mobile/components/_style/mixin/theme'

@import '~nib/lib/nib/vendor'
@import '~nib/lib/nib/gradients'

color-primary = #e93030

webpack.base.conf.js文件修改

{
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'style-loader',
            options: {
              import:['theme.styl']
            }
          }
        ]
      },

未修改主题前默认样式还是生效的,按照上文的修改后,原本的默认样式也都失效了

xxyan0205 commented 5 years ago

https://github.com/mand-mobile/vue-cli3-example/tree/custom-theme