在 vue.js 中全局引入 less 有三种方法:使用 vue cli 插件:使用 vue-cli-plugin-style-resources 插件,在 src/styles 目录中定义变量和混入,并在 main.js 中引入。使用 less-loader:在 webpack.config.js 中配置 less-loader,并在 src/main.less 中定义 less 样式。使用 style-loader 和 less-loader:直接在 src/styles 目录中定义 les
如何在 Vue 应用中全局引入 LESS
在 Vue 中全局引入 LESS 的方法有几种:
1. 使用 Vue CLI
如果使用 Vue CLI 创建项目,可以使用 vue-cli-plugin-style-resources 插件。
安装插件:
vue add style-resources
在 src/styles/variables.less 中定义变量:
@primary-color: #409eff;
在 src/styles/mixins.less 中定义混入:
@import '~@/styles/variables.less';
.primary-color {
color: @primary-color;
}
在 main.js 中引入:
import './styles/mixins.less';
2. 使用 less-loader
手动安装 less-loader 和 less:
npm install less less-loader --save-dev
在 webpack.config.js 中配置:
module.exports = {
module: {
rules: [
{
test: /.less$/,
use: [
'style-loader',
'<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15716.html" target="_blank">css</a>-loader',
'less-loader',
],
},
],
},
};
在 src/main.less 中定义 LESS 样式:
@import '~@/styles/variables.less';
.primary-color {
color: @primary-color;
}
3. 使用 style-loader 和 less-loader
手动安装 style-loader 和 less-loader:
npm install style-loader less-loader --save-dev
在 src/styles/global.less 中定义 LESS 样式:
@import '~@/styles/variables.less';
body {
font-family: Arial, sans-serif;
}
.primary-color {
color: @primary-color;
}
在 main.js 中引入:
import './styles/global.less';