在我的 angular-cli 项目中从 node-sass 切换到 dart sass

Posted 2023-02-21

【中文标题】在我的 angular-cli 项目中从 node-sass 切换到 dart sass

【英文标题】：Switching from node-sass to dart sass in my angular-cli project

【发布时间】：2019-04-18 15:05:32

【问题描述】：

在“npm install”期间，我遇到了 node-sass 做各种愚蠢行为的问题，包括但不限于：

GNU c++ 编译某些东西（可能是它自己） 尝试运行 python2.7 试图运行任何其他版本的 python 正在尝试连接到 github

这在公司环境中造成了问题，我必须在 Jenkins 上编译我的项目，其中 NPM 库必须从公司服务器上的 npm 注册表克隆中提取，并且只有该特定项目的严格必需品在 docker 上可用所以：

没有github 没有蟒蛇 没有 c++

我决定我已经受够了 node-sass 的恶作剧，所以我尝试了建议的“dart-sass”，因为它的概念似乎是它完全兼容角度并且旨在解决大多数问题节点萨斯：https://sass-lang.com/dart-sass

我尝试删除 node-sass 并将 dart-sass 替换为：

npm remove node-sass
npm install dart-sass
ng serve

但这会导致：

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'

对于项目中的每个组件。

为什么还在找node-sass？

这是我的 package.json：

  "name": "web.ui",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": 
    "ng": "ng",
    "start": "ng serve --aot=false --proxy-config proxy.json",
    "build": "ng b --prod",
    "builden": "ng b --prod --configuration=en",
    "buildde": "ng b --prod --configuration=de",
    "test": "ng test",
    "lint": "ng lint",
    "ngc": "ngc"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/material-moment-adapter": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/router": "^7.0.3",
    "@ngx-translate/core": "^11.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "@ngx-translate/i18n-polyfill": "^1.0.0",
    "@types/underscore": "^1.8.7",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.1.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.3",
    "dart-sass": "^1.15.0",
    "dom-autoscroller": "^2.3.4",
    "file-saver": "^2.0.0-rc.4",
    "font-awesome": "^4.7.0",
    "iconv-lite": "^0.4.23",
    "lodash": "^4.17.5",
    "moment": "^2.22.2",
    "ng-snotify": "^4.3.1",
    "ng2-ion-range-slider": "^2.0.0",
    "ngx-bootstrap": "^3.1.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.2.0",
    "typescript": "3.1.6",
    "underscore": "^1.9.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "^7.0.5",
    "@angular/compiler-cli": "^7.0.3",
    "@angular/language-service": "^7.0.3",
    "@types/jasmine": "^2.8.9",
    "@types/jasminewd2": "~2.0.5",
    "@types/node": "~10.12.1",
    "codelyzer": "^4.5.0",
    "postcss-modules": "^1.4.1",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0"
  

这是我的 angular.json：

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "web.ui": 
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/assets/images"
            ],
            "styles": [
              "node_modules/ng-snotify/styles/simple.scss",
              "node_modules/ion-rangeslider/css/ion.rangeSlider.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/app/logged.in/content/routing/common/styles/ion.slider.style.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"
            ]
          ,
          "configurations": 
            "en": 
              "aot": true,
              "outputPath": "dist/en/",
              "i18nFile": "src/assets/i18n/en.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            ,
            "production": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            ,
            "production-en": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "outputPath": "dist/my-project-en/",
              "i18nFile": "src/assets/i18n/en.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            ,
            "production-de": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "outputPath": "dist/my-project-en/",
              "i18nFile": "src/assets/i18n/de.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "web.ui:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "web.ui:build:production"
            ,
            "en": 
              "browserTarget": "web.ui:build:en"
            ,
            "production-en": 
              "browserTarget": "web.ui:build:production-en"
            ,
            "production-de": 
              "browserTarget": "web.ui:build:production-de"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "web.ui:build"
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": [
              "src/tsconfig.app.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          
        
      
    ,
    "web.ui-e2e": 
      "root": "",
      "sourceRoot": "",
      "projectType": "application"
    
  ,
  "defaultProject": "web.ui",
  "cli": 
    "warnings": 
      "typescriptMismatch": false
    
  ,
  "schematics": 
    "@schematics/angular:component": 
      "prefix": "app",
      "styleext": "scss"
    ,
    "@schematics/angular:directive": 
      "prefix": "app"
    
  

这就是在 dart（js 框架）下添加 sass 的方法，顺便说一句：Is Dart integrated with SASS?

但该方法不适用于角度。

更新：

我试过用这个：How to find reverse dependencies on npm package?

尽管我尽了最大努力，但要弄清楚是什么依赖/拉动 node-sass，结果证明是：@angular-devkit/build-angular

但如果我删除它，那么 ng 服务就会不高兴。它说它需要它。

【问题讨论】：

天哪，有史以来最好的消息。我正在立即将 node-sass 迁移到 sass。非常感谢您提供此信息

【参考方案1】：

FWIW，为了让 Angular 7.x 使用 sass 包而不是尝试安装 node-sass，我必须：

从我的 package.json 中删除 @angular-devkit/build-angular 删除节点模块 npm 安装 npm i -D sass 将@angular-devkit/build-angular的0.13.10添加回package.json 再次安装 npm。

【讨论】：

我也在使用 angular 7.x，这正是我想要的。谢谢！

这对我不起作用，它似乎仍在尝试使用node-sass，我也在使用 Angular 7。对于这个问题，您还有其他提示吗？在编译期间无法识别@use: "sass:map"。

这在 Angular 7.x 项目中对我有用，谢谢。

该解决方案也适用于我迁移到 angular 12

在尝试了很多之后，从 9 升级到 12.2.6 也可以。

【参考方案2】：

@angular-devkit/build-angular 支持 dart sass，只是你使用了错误的模块，尝试 npm install sass 与 dart-sass 相对。

您可以在此处查看确认这一点的源代码： https://github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f