Angles-CLIでassetsフォルダ内のCSSにSCSSをコンパイルする方法

Question

Angular 4プロジェクトがあり、angular-cli 1.0.xで作成されています。 私のプロジェクトでは、angular-cliが1.1.1にアップグレードされました。

私はassetsフォルダを持っており、その中に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スタイルにアクセスできるようになります。

assetsフォルダーには静的な内容が含まれていると記載されているように、のファイルはassetsフォルダーの下に置いてください。

"assets": ["assets"] 

だから、それがあるように設定し、すべてのassetsフォルダの内容が常にコピーされることを持っていることによって：assetsフォルダが.angular-cli.json設定ごとなどの静的コンテンツに使用されているため起こっ

Answer 2

。 をassetsフォルダの外に置く必要があります。これは、cli buildツールチェーンが出力しないようにするためです。カスタムscssファイル用に個別のフォルダを作成することも考えられます。

scssが正しく参照されている場合は、アプリを停止させるべきではありません。

言うならば、あなたはCLIは、ビルドが生成されますよう@import '/assets/theme';のようなあなたのグローバルstyles.scssで、それはとにかく動作することを参照することができますassetsフォルダ内のtheme.scssファイルを持っています。その後、ビルドが完了した後、すべてのスタイルがstyles.bundle.jsに注入されました。この時点では、実行時にassets/theme.scssファイルは使用されませんが、ng nuildを実行する場合は、とにかくassetsフォルダに残ります。したがって、不要なファイルからきれいにするために、assetsフォルダから取り出してください。

Answer 3

あなたが「資産」フォルダに「スタイル」パラレルという名前の新しいフォルダを作成し、そこにあなたの.scssファイルを配置し、.angular-cli.jsonファイルの「スタイル」ノードで.scssファイルを参照することができます。まだ場合

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

.angular-cli.jsonの「デフォルト」ノードにこれを追加し機能していない：私は、このコマンドを試してみました

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