vue-cli初始化项目中使用less的方法
什么是less?
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
引言
现在前端的vue框架越来越火，vue-cli作为vue项目的脚手架工具，是我们在开发中最最经常使用的。为了在vue项目中更好的管理我们的css文件，我们通常会引入less或者sass来帮助我们管理我们的css代码。那么，本文旨在记录如何在vue-cli初始化的项目中使用less来帮助我们更好的管理css代码。
下面话不多说了，来随着小编一起看看详细的介绍吧
方法如下：
首先，安装less，推荐使用淘宝镜像安装：
cnpm install less less-loader --save
然后，修改配置文件：打开build文件夹-->找到webpack.base.conf.js，输入配置代码：
module.exports = {
……
module: {
rules: [
……
//在rules数组的最后位置插入一项配置代码
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]}
最后在你的style标签中添加lang="less",scoped表示私有作用域
<style scoped lang="less"> /* * 这里面你就可以愉快地书写less代码了 */ </style>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对小牛知识库的支持。
-
本文向大家介绍使用Vue CLI创建typescript项目的方法，包括了使用Vue CLI创建typescript项目的方法的使用技巧和注意事项，需要的朋友参考一下 使用最新的Vue CLI @vue/cli创建typescript项目，使用vue -V查看当前的vue cli版本 安装命令 创建项目 上下键选择，空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用，我
-
没有安装 San-CLI 需要安装 npm i -g san-cli 快速创建 san init <app-name> 创建的是 san 项目。 app-name 是要创建的工程项目目录，可以为.（即在当前目录下创建）。 指定脚手架创建 san init <template> <app-name> template 是工程项目脚手架地址，支持 github、icode、gitlab 等 re
-
概述 我想实现一个开箱即用的 API 框架的轮子，这个轮子是基于 Gin 基础上开发的。 为什么是开箱即用，它会集成哪些功能？ 以上功能点，都是常用的，后期可能还会增加。 废话不多说，咱们开始吧。 创建一个项目，咱们首先要考虑一个依赖包的管理工具。 常见的包管理有，dep、go vendor、glide、go modules 等。 最开始，使用过 dep，当时被朋友 diss 了，推荐我使用 go
-
项目初始化 俗话说磨刀不误砍柴工，在开始之前要完成一些准备工作以便移植其他框架的组件，首先我们得把框架给安装好，easySwoole是一个非常易于使用的框架，安装一样很简单，只需要切换到项目根目录 //命令行快速安装 bash <(curl https://www.easyswoole.com/installer.sh) //OR curl https://www.easyswoole.com/i
-
本文向大家介绍详解Vue使用 vue-cli 搭建项目，包括了详解Vue使用 vue-cli 搭建项目的使用技巧和注意事项，需要的朋友参考一下 vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境，可以直
-
本文向大家介绍react-native 初始化并开始使用React Native项目，包括了react-native 初始化并开始使用React Native项目的使用技巧和注意事项，需要的朋友参考一下 示例 初始化 使用特定版本的React Native进行初始化 为Android运行 为iOS运行