less use Notes theme switching global import less

Theme colors to achieve switching 

components / theme.less, with reading theme layout according to @theme

@theme: dark;

.dark-theme (@transparency) when (@theme = default) {
  color: rgba(0, 0, 0, @transparency);
}

.dark-theme (@transparency) when (@theme = dark) {
  color: rgba(255, 255, 255, @transparency);
}

.dark-theme-color (@transparency) when (@theme = default) {
  color: rgba(0, 0, 0, @transparency);
}

.dark-theme-color (@transparency) when (@theme = dark) {
  color: rgba(255, 255, 255, @transparency);
}

　　

Reference theme.less

<style lang="less" scoped>
  @import '~@comp/theme.less';
  .title {
    .dark-theme-color(0.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>

　　

You need to do configuration vue.config.js

chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))

　　

This can be achieved theming

------------------------------Dividing line------------------ --------------------

There is a problem that is useful to theme.less be introduced once, very convenient

Next to realize global add theme.less

Npm first with three or yarn

CLI-plugin--VUE-style Loader Resources- 
style-Resources-Loader 
Sass-Resources-Loader (two front Bahrain not effective, then it can try to install)

 Then vue.config.js new configuration pluginOptions

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/assets/css/theme.less')]
    }
}

Finally theme.less moved src / assets / css / re-run click on it