vue+webpack配置使用less

最新推荐文章于 2024-02-13 00:00:00 发布

小米李

最新推荐文章于 2024-02-13 00:00:00 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js webpack less

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/129182515

该文介绍了如何在Vue项目中结合Webpack配置使用Less。首先通过yarn或npm安装less和less-loader，然后在webpack.config.js中配置模块规则，添加对.css和.less文件的处理，使用style-loader、css-loader和less-loader。最后，可以在Vue组件中写Less样式并正常使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack+vue配置使用less

1、安装less

// yarn 
yarn add less
// npm
npm install --save less
npm install less -g

//验证下是否安装成功
lessc -v

2、安装less-loader

// yarn
yarn add less-loader
// npm 也可以安装
npm i less-loader  --save-dev

3、webpack.config.js中配置

    //添加模块
    module: {
        rules: [
            {//设置css的解析规则
                test: /\.(css|less)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: "less-loader" } // compiles Less to CSS
                ]
            },
        ],
    },

安装后可使用

// lang="less"

<style scoped lang="less">
.nav {
  height: 60px;
  border: 1px solid #e8e8e8;
  .test {
    color: red;
  }
}
</style>