less使用手记 主题切换 全局import less

实现主题颜色切换

components/theme.less，跟据@theme读取主题布局

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@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

?

1 2 3 4 5 6 7 8 9

<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做配置

?

1 2 3 4 5 6 7 8 9

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这三个

?

1 2 3

vue-cli-plugin-style-resources-loader style-resources-loader sass-resources-loader（前面两个装完不生效的话，可以尝试装它）

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

?

1 2 3 4 5 6

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

先备份一下参考资料