angular6踩坑之 使用命令新建组件生成less

• 首先，注意一下，这个东西是本人自己所写。如果有不对的地方，各位大神请指出来，我不一定改。哈哈哈（手动滑稽）。**

哦对了，注意复制的时候标点符号的中英文。全半角，否则，出了问题别怪我。

**

ng g component 组件名

• 这个指令，想必学习的时候肯定会接触到。 新建组件的时候，直接敲这个命令会方便的多。它可以帮你建立很多东西，包括css，html，ts。
• 但是如果我们不想用css，想用less那该怎么办呢。
• 网上找了几个办法，貌似并不是太全面。只能靠自己了。
• 分别用了两个命令

“ng new 项目名 --style less”

与

“ng new 项目名”

创建了不同的项目，对比了一下angular.js的不同。终于发现其中的不同之处。（这里感谢compare做出的贡献）。

• 如果建立项目的时候用了指令 ：

  ng new 项目名 --style less

  那么，这个项目就是直接支持less的。不用做任何操作。直接使用创建组件的那个命令就可以了。它会在你的组件目录里直接生成less的文件。

• 如果，新建项目的时候用的指令 ：

  ng new 项目名
  

  那么，这个项目是不支持less的。怎么做才能让他支持less并且在生成组件的时候直接生成less文件呢。继续看下去。

• first：打开angular.json这个文件，我相信你能够找到它。打开它。搜索“schematics”有没有看到它，如果没猜错，应该是个空的。类似这个样子

  “schematics”: {}

  然后把它修改成下面这个样子：

  “schematics”: {
  “@schematics/angular:component”: {
  “styleext”: “less”
  }
  }

• second：搜索“src/styles”，（这里一共两处，一定要全部找到）。你会发现这么个东西：

  “styles”: [
  “src/styles.css”
  ]

  然后呢，把它修改成下面介个样子：

  “styles”: [
  “src/styles.less”
  ]

  相信大家应该都能看出来区别是啥。如果看不出来去配副眼镜吧。

• 修改到这里angular.json这个文件就修改完了。但是真的完了吗？当然没有。

• 最后一步，把src/app下的所有css后缀的改成less。ts文件里凡是调用css的都改成less。这样，就可以啦。大家可以试试看。

• 当然如果有人想用sass，其实吗。这个跟less的操作差不多。无所谓就是把上文的less改成sass。嗯，应该是这个样子，我没测试。各位大神可以自己测试一下啊。哦哦哦，下班回家。