Angular 2 Webpack 2 - Sass不能在組件中工作

我一直在遵循這裏的指南https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components將scss文件合併爲我的angular 2組件的樣式，但它不起作用。Angular 2 Webpack 2 - Sass不能在組件中工作

如何將scss文件與webpack結合到我的angular 2組件中？

這裏的主要成分是：

import { Component } from '@angular/core'; 


@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/app/app.component.html', 
    styleUrls: [ 'src/app/app.component.scss' ] 
}) 
export class AppComponent { 
    constructor() {} 

    name: string = 'My Demo'; 
}

我知道文章建議在我的WebPack配置使用原始裝載機但不工作或者

的SCSS只是停留在不被預處理。

你可以在這裏看到plnkr我的基本項目的細節：https://plnkr.co/edit/eG1POBcBL8kGpvrhh3yW?p=info

按照README中的指導來構建和服務。

似乎沒有太多的最新的文檔，包括組件中的scss文件？

來源

2017-01-30 Rich

如果它不工作*是*不是問題。什麼是實際問題？ –

@RomanC如何讓組件與sass一起工作？如何將scss文件與webpack結合到我的angular 2組件中？ – Rich

@RomanC我更新了問題:) – Rich

如果你想要一個SCSS開箱即用的新項目，用angular-cli生成它，你很好。更容易，然後自己執行sass imo。

ng new sassy-project --style=sass

或：

ng new sassy-project --style=scss

來源

2017-01-30 23:27:17

有趣。謝謝！看起來像是過度的如此如此標準的要求。 – Rich

你可以做薄在明年方式：項目文件夾內

命令行，其中現有的package.json是：

npm install node-sass sass-loader raw-loader --save-dev

在的WebPack .common.js，搜索「loaders：」並將此對象添加到加載器數組的末尾（不要忘記向e添加逗號以前的對象的ND）：

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
}

然後在您的組件：

@Component({ 
    styleUrls: ['./filename.scss'], 
})

如果你想全局CSS支持，那麼頂級組件（可能app.component.ts）除去封裝和包括SCSS：

import {ViewEncapsulation} from '@angular/core'; 

@Component({ 
    selector: 'app', 
    styleUrls: ['./bootstrap.scss'], 
    encapsulation: ViewEncapsulation.None, 
    template: `` 
}) 
class App {}

來源

2017-01-31 18:23:15

我已經嘗試了所有這些。不管怎麼說，還是要謝謝你。 – Rich

我的項目是使用angular-cli生成的，我無法在我的項目的根目錄上找到webpack.common.js文件。唯一可以找到webpack.common.js的地方是在webpack dev的node_modules裏面，並且在那裏編輯是不安全的。 – eHussain

這個解決方案與'https：// github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components'類似，但它不起作用。你最終搞清楚了嗎？有同樣的問題。 – Kimmiekim

Angular 2 Webpack 2 - Sass不能在組件中工作

回答

相關問題