如何在vue项目中修改less变量，多主题项目解决方案

最新推荐文章于 2023-12-28 16:03:59 发布

a848518

最新推荐文章于 2023-12-28 16:03:59 发布

阅读量3.2k

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/niubilityWly/p/8017176.html

版权

本文介绍了如何在Vue项目中结合Webpack，将样式提取到单独的styles.less文件，通过less.js在开发环境中编译Less，并在JavaScript中动态修改全局变量实现多主题。详细步骤包括提取.vue文件中的style，安装依赖，配置Webpack，以及在JS中定义和修改Less变量的方法。

摘要由CSDN通过智能技术生成

【项目结构】webpack+vue+less

【解决方案】

　　首先将vue中每个.vue文件里面的style提取出来

　　安装依赖

 npm install extract-text-webpack-plugin --save-dev

　　安装完成后修改webpack.base.conf.js中的配置

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
                less: ExtractTextPlugin.extract({
                  fallback: 'vue-style-loader',
                  use: 'css-loader!less-loader'
                }),
                css: ExtractTextPlugin.extract({
                  fallback: 'vue-style-loader',
                  use: 'css-loader'
                })
              }
            }
          },    
]},

plugins: [

　　new ExtractTextPlugin({