Question

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

Answer 1

我只需要对现有项目执行此操作，并将来自各个地方的大量信息拼凑在一起，主要来自this similar stackoverflow 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

Answer 2

步骤1： - 将所有css文件从css（style.css）重命名为scss（style.scss）

步骤2： - 如果您使用旧版本（至4），请检查 .angular-cli.json文件并在下面的代码中将css替换为scss ＆＃34;默认＆＃34;：{ ＆＃34; styleExt＆＃34;：＆＃34; scss＆＃34;，＆＃34;组件＆＃34;：{} }

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

重新启动项目

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

但是对于最新版本（6），我们使用node-sass将scss转换为css，因此如果您收到错误（模块构建失败：错误：sass-loader需要node-sass＆gt; = 4。请安装兼容版本）请使用以下命令

npm rebuild node-sass

Answer 3

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

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

-.-

非常感谢'Alex Eagle'

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

3 个答案: