vue项目引入less
1、安装lessnpm install less-loader@4.1.0 --save安装完成后打开 build目录,修改 webpack.base.conf.js 中的相关配置:在 module.exports 中找到 module 中的 rules 数组module.exports = {......module: {rules: [{...},{...},{test: /\.less$/,
·
1、安装less
npm install less-loader@4.1.0 --save
安装完成后打开 build目录,修改 webpack.base.conf.js 中的相关配置:
在 module.exports 中找到 module 中的 rules 数组
module.exports = {
...
...
module: {
rules: [
{...},
{...},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
]
}
2、使用less
在.vue文件的 style 标签中添加 lang="less"后,即可采用less的语法编写CSS代码
附:引入变量(varibles)和混合(mixins)的写法如下:
在 src/assets/目录下新建 styles 目录,并在此目录下编写 varibles.less 和 mixins.less
编写CSS代码时通过 import 引入:
<style lang="less" scoped>
@import '../assets/styles/varibles.less';
@import '../assets/styles/mixins.less';
/* 样式代码 */
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)