以角度2将所有css文件转换为scss

Posted 2023-02-22

【中文标题】以角度2将所有css文件转换为scss

【英文标题】：Converting all css files to scss in angular 2

【发布时间】：2017-08-15 06:18:57

【问题描述】：

我从事过 angular 2 项目并使用过 angular-cli。我想用 scss 替换所有的 css 文件。最简单的方法是什么？或者是否有一个命令行可以处理它而无需手动操作。

【参考方案1】：

我只需要对现有项目执行此操作，然后将来自不同地方的大量信息拼凑在一起，主要来自this similar *** question。这是一组命令行操作（在 Mac OSX 上对我有用）

# rename all your current files
find . -name "*.css" -exec bash -c 'mv "$1" "$1%.css".scss' - '' \;

# change angular cli config file to include styles.scss instead of styles.css
sed -i -e 's/styles.css/styles.scss/g' .angular-cli.json

# now we need to go thru and fix up all the places where ts files refer to .css files
# there’s probably a better way (and will only work if you don’t have multiple css files in a component)
# this is what I did
find ./src -name "*.ts" -exec sed -i -e 's/\(.*styleUrls.*\)\.css\(.*\)/\1\.scss\2/g'  +
rm -r *.ts-e

# fix for future generates styles
ng set defaults.styleExt scss

# Add node-sass npm module

npm install node-sass --save-dev

# or if you are using yarn, like me:

yarn add node-sass --dev

【讨论】：

如果您在运行第一个命令时很草率，并且在项目的根目录下执行了此操作，那么您可能已经重命名了一些 npm 依赖项的文件。如果是这样，请删除这些依赖项并执行npm i 重新安装...

【参考方案2】：

Step1 :- 将所有 css 文件从 css (style.css) 重命名为 scss (style.scss)

Step2 :- 如果您使用的是旧版本（直到 4），请检查 .angular-cli.json 文件并在下面的代码中将 css 替换为 scss “默认值”： "styleExt": "scss", “零件”：

      if you are using latest version (6) than please check angular.json 
      file and replace css to scss
      "schematics": 
       "@schematics/angular:component": 
        "styleext": "scss"
      
      ,

然后重启项目

注意：- 对于角度（直到 4），我们使用 sass-loader 将 scss 转换为 css

但对于最新版本 (6)，我们使用 node-sass 将 scss 转换为 css，因此如果您遇到类似（模块构建失败：错误：sass-loader 需要node-sass >=4。请安装兼容版本) 比请使用下面的命令

npm 重建节点-sass

【参考方案3】：

是的，现在我必须这样做并为 sass-convert 添加一个步骤，因为 angular 决定将其合并到

https://github.com/angular/angular-cli/pull/13444

-.-

非常感谢“亚历克斯·伊格尔”