说明
【Vue 开发实战】学习笔记。
vuecli3 配置
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1DA57A',
},
javascriptEnabled: true
},
}
},
}
我们可以修改一下写法
<style lang="less" src="./index.less"></style>
引入下面的 index.less 就行
@import "~ant-design-vue/lib/style/themes/default.less";
.kaimo-handle {
position: absolute;
top: 240px;
right: 300px;
width: 48px;
height: 48px;
background-color: @primary-color;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 48px;
border-radius: 3px 0 0 3px;
}
在线动态编译
如果你有报错可以参考我遇到的问题文章链接：Ant design vue动态主题切换报错Error LessError: Cannot find module ‘antd/lib/style/themes/default.less
这里我们使用 antd-theme-webpack-plugin
这个 webpack 插件用于生成特定颜色的 less/css 并注入到您的 index.html 文件中，以便您可以在浏览器中更改 Ant Design 特定的颜色主题。
具体的配置看文档就行。
但是这个我们不安装该依赖，主要原因还是版本1.3.9报错，有兴趣的可以看看我刚刚提到的文章。
1、新建插件
我们新建一个 ant-design-vue-pro\webpack-plugins\antd-theme-webpack-plugin.js 插件：里面的代码直接复制 antd-theme-webpack-plugin 的代码。
// https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/index.js
const { generateTheme } = require("antd-theme-generator");
const webpack = require("webpack");
const { RawSource } = webpack.sources || require("webpack-sources");
const path = require("path");
class AntDesignThemePlugin {
constructor(options) {
const defaultOptions = {
varFile: path.join(__dirname, "../../src/styles/variables.less"),
antDir: path.join(__dirname, "../../node_modules/antd"),
stylesDir: path.join(__dirname, "../../src/styles/antd"),
themeVariables: ["@primary-color"],
indexFileName: "index.html",
generateOnce: false,
lessUrl: "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",
publicPath: "",
};
this.options = Object.assign(defaultOptions, options);
this.generated = false;
this.version = webpack.version;
}
apply(compiler) {
const pluginName = "AntDesignThemePlugin";
if (this.version.startsWith("5.")) {
compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
compilation.hooks.processAssets.tapAsync(
{
name: pluginName,
stage:
webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
},
(assets,) =>
this.addAssets(compilation, assets, callback)
);
});
} else {
compiler.hooks.emit.tapAsync(pluginName, (compilation,) =>
this.addAssets(compilation, compilation.assets, callback)
);
}
}
addAssets(compilation, assets,) {
this.generateIndexContent(assets, compilation);
if (this.options.generateOnce && this.colors) {
this.generateColorStylesheet(compilation, this.colors);
return callback();
}
generateTheme(this.options)
.then((css) => {
if (this.options.generateOnce) {
this.colors = css;
}
this.generateColorStylesheet(compilation, css);
callback();
})
.catch((err) => {
callback(err);
});
}
generateIndexContent(assets,) {
if (
this.options.indexFileName &&
this.options.indexFileName in assets
) {
const index = assets[this.options.indexFileName];
let content = index.source();
if (!content.match(/\/color\.less/g)) {
const less = `
<link rel="stylesheet/less" type="text/css" href="${this.options.publicPath}/color.less" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="${this.options.lessUrl}"></script>
`;
const updatedContent = content
.replace(less, "")
.replace(/<body>/gi, `<body>${less}`);
if (this.version.startsWith("5.")) {
compilation.updateAsset(
this.options.indexFileName,
new RawSource(updatedContent),
{ size: updatedContent.length }
);
return;
}
index.source = () => updatedContent;
index.size = () => updatedContent.length;
}
}
}
generateColorStylesheet(compilation,) {
if (this.version.startsWith("5.")) {
compilation.emitAsset("color.less", new RawSource(source), {
size: source.length,
});
return;
}
compilation.assets["color.less"] = {
source: () => source,
size: () => source.length,
};
}
}
module.exports = AntDesignThemePlugin;
2、安装依赖
然后安装 antd-theme-webpack-plugin 需要的依赖 antd-theme-generator
此脚本生成颜色特定的样式/更少文件，您可以使用该文件在浏览器中动态更改主题
npm install具体可以看文档： https://github.com/mzohaibqc/antd-theme-generator
3、配置 vue.config.js
const path = require("path");
const AntDesignThemePlugin = require('./webpack-plugins/antd-theme-webpack-plugin');
const options = {
antDir: path.join(__dirname, './node_modules/ant-design-vue'),
stylesDir: path.join(__dirname, './src'),
varFile: path.join(__dirname, './src/assets/styles/theme/variables.less'),
themeVariables: ['@primary-color'],
generateOnce: false
}
const themePlugin = new AntDesignThemePlugin(options);
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1DA57A',
},
javascriptEnabled: true
},
}
},
chainWebpack: config => {
const svgRule = config.module.rule('svg');
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear();
// 添加要替换的 loader
svgRule.use('vue-svg-loader').loader('vue-svg-loader');
},
configureWebpack: {
plugins: [ themePlugin ]
},
devServer: {
proxy: {
// '@(/api)': { target: 'http://localhost:3000',
'/api': {
target: 'http://localhost:8080',
bypass: function (req, res,) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
} else if(process.env.MOCK !== "none") {
// 将请求url转为文件名
const name = req.path.split("/api/")[1].split("/").join("_");
const mock = require(`./mock/${name}`);
const result = mock(req.method);
// 需要清除缓存
delete require.cache[require.resolve(`./mock/${name}`)];
return res.send(result);
}
},
},
},
},
}
4、添加 variables.less
新建 ant-design-vue-pro\src\assets\styles\theme\variables.less
@import "~ant-design-vue/lib/style/themes/default.less";
关于 ~ 的使用可以查看：https://www.npmjs.com/package/less-loader#webpack-resolver
5、配置 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>.less = {
async: false,
env: 'production',
javascriptEnabled: true,
modifyVars: {
'primary-color': 'orange',
}
};</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
</body>
</html>
6、效果
启动服务，我们就可以看到：
我们动态修改一下，在控制台将主题色改为粉色的，执行下面代码
window.less.modifyVars({"@primary-color": "pink"})
我们可以看到主题色就改变了。
关于生成的 color.less 文件，可以访问 http://localhost:8080/color.less 查看
