less使用手記 主題切換 全局import less

實現主題顏色切換

components/theme.less，跟據@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);
}

　　

引用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>

　　

需先在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'))

　　

這樣就可以實現主題化

------------------------------分割線--------------------------------------

這里有一個問題，就是有用到theme.less都要引入一次，很不方便

接下來實現全局加載theme.less

首先用npm或者yarn這三個

vue-cli-plugin-style-resources-loader
style-resources-loader
sass-resources-loader（前面兩個裝完不生效的話，可以嘗試裝它）

 然后在vue.config.js新增pluginOptions配置

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

最后將theme.less移到src/assets/css/重新 run 一下就可以了

 

后面會講如何通過點擊切換主題

https://segmentfault.com/a/1190000016047076

https://blog.csdn.net/u013884068/article/details/78186798

https://blog.csdn.net/LuckyMon/article/details/89923822

https://segmentfault.com/a/1190000016061608

先備份一下參考資料