如何在角度4及以上的版本中使用webpack.config将sass与编译集成到css中？

Question

如何使用角度为4及以上版本的webpack.config.js将sass与编译集成到css中？

Answer 1

如果您使用的是角度v4，则v5会转到.angular.cli.json并将属性"styles":["styles.css"]更改为"styles":["styles.scss"]，将属性"styleExt":css更改为styleExt:"scss"，版本6转到angular.json并在角度6中执行相同操作* styleExt为styleext样式文本用于在新组件中自动生成.scss个文件，而不是{{ 1}}在使用cli +生成新的文件时，将所有文件和文件路径从.css重命名为.css

Answer 2

使用sass，你必须在angular-cli.json中进行更改，为此使用命令

ng set defaults.styleExt scss

它将做什么是在angular-cli.json文件中进行更改并添加像这样的更改

 "defaults": {
 "styleExt": "scss",
 "component": {
 } 
}

运行命令后，请确保将样式数组更改为 styles.sass 并在src目录中创建类似styles.css的主样式文件，现在将styles.sass和导入所有组件的样式文件放入主样式文件中。