如何使Angular-CLI在资产文件夹中将SCSS编译为CSS文件

Question

我有一个使用angular-cli 1.0.x创建的Angular 4项目。 目前，在我的项目中，angular-cli已升级到1.1.1。

我有一个资产文件夹，当我把一个CSS文件，它可以使用。 但是，当我将css文件重命名为scss时，它不是由angular-cli编译的。

我需要做什么才能将scss文件编译为css？

这是我的项目的package.json：

{ 
    "name": "my project", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "4.1.3", 
    "@angular/common": "4.1.3", 
    "@angular/compiler": "4.1.3", 
    "@angular/core": "4.1.3", 
    "@angular/forms": "4.1.3", 
    "@angular/http": "4.1.3", 
    "@angular/platform-browser": "4.1.3", 
    "@angular/platform-browser-dynamic": "4.1.3", 
    "@angular/router": "4.1.3", 
    "@angular/upgrade": "4.1.3", 
    "@axinpm/ang-core": "^0.2.3", 
    "chart.js": "2.5.0", 
    "core-js": "2.4.1", 
    "moment": "2.18.1", 
    "ng2-charts": "1.5.0", 
    "ng2draggable": "^1.3.2", 
    "ngx-bootstrap": "1.6.6", 
    "rxjs": "5.4.0", 
    "ts-helpers": "1.1.2", 
    "zone.js": "0.8.11" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.1.1", 
    "@angular/compiler-cli": "4.1.3", 
    "@types/jasmine": "2.5.47", 
    "@types/node": "7.0.22", 
    "codelyzer": "3.0.1", 
    "jasmine-core": "2.6.2", 
    "jasmine-spec-reporter": "4.1.0", 
    "karma": "1.7.0", 
    "karma-chrome-launcher": "2.1.1", 
    "karma-cli": "1.0.1", 
    "karma-jasmine": "1.1.0", 
    "karma-jasmine-html-reporter": "0.2.2", 
    "karma-coverage-istanbul-reporter": "1.2.1", 
    "protractor": "5.1.2", 
    "ts-node": "3.0.4", 
    "tslint": "5.3.2", 
    "typescript": "2.4.2" 
    } 
} 

这是我的项目的.angular-cli.json：

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "version": "1.0.0-alpha.6", 
    "name": "my project" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": ["assets"], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "scss/style.scss" 
     ], 
     "scripts": [ 
     "../node_modules/chart.js/dist/Chart.bundle.min.js", 
     "../node_modules/chart.js/dist/Chart.min.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json" 
    }, 
    { 
     "project": "src/tsconfig.spec.json" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "scss", 
    "prefixInterfaces": false 
    } 
} 

感谢

Answer 1

要更改项目的现有样式你需要运行这个命令。

ng set defaults.styleExt scss 

它会改变扩展名，您将能够访问SCSS样式。

将您的SCSS文件保存在assets文件夹下，因为@Kuncevic提到assets文件夹包含静态内容。

Answer 2

发生这种情况，因为assets文件夹用于静态内容按照.angular-cli.json配置：

"assets": ["assets"] 

因此，通过具有该设置，所有assets文件夹的内容被复制总是喜欢它。您必须将.scss放置在assets文件夹之外，以避免它由cli构建工具链输出。您也可以考虑为您的自定义scss文件创建单独的文件夹。

但是，如果您的scss引用正确，它不应该制动您的应用程序。

如果说，你有theme.scss文件在你的文件夹assets你可以引用在您的全球styles.scss像@import '/assets/theme';它只是反正上班CLI会产生一个版本。然后，构建完成后，您的所有样式最终注入到styles.bundle.js。此时，在运行时没有使用您的assets/theme.scss文件，但在运行ng nuild的情况下，它仍然会保留在assets文件夹中。因此，您最好从assets文件夹中取出文件夹，以防止它从不必要的文件中清除。

Answer 3

您可以创建一个名为新文件夹“款式”并列为“资产”文件夹，然后把你的.scss文件存在，并参照.scss文件中的“样式”节点.angular-cli.json文件：

"styles": [ 
    "./styles/site.scss" 
] 

如果仍不工作，然后将其添加到的.angular-cli.json的“默认”节点：

"defaults": { 
    "styleExt": "css", 
}