Как использовать SASS/SCSS в угловом приложении

Question

Я пытаюсь создать функциональность цветовой темы в приложении angular2, используя sass. Мой файл header.component.scss является:

$head-color: #f11; 
h1{ 
    color: $head-color; 
} 

Я создал файл webpack.common.js в корневой директории и добавили в него следующее:

const webpack = require('webpack'); 
module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ['raw-loader', 'sass-loader'] 
     } 
    ] 
    } 
}; 

Мой заголовок отображается в неплатеже черный цвет. Однако, если я изменяю файл scss, чтобы после этого его отображали красным цветом.

h1{ 
    color: #f11; 
} 

Так что в принципе я не могу назначить динамическое значение для переменных. Любой, кто имеет представление об этом, делится. TIA

Answer 1

Вместо использования стилей styleUrls используйте стили и преобразуйте файл в строку.

styles: [require('./header.component.scss').toString()] 

Для вашей конфигурации webpack я думаю, что у вас есть много загрузчиков. Я считаю, что вы должны быть в состоянии просто

'raw-loader!sass-loader' 

Мой текущий конфиг:

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loader: 'raw-loader!postcss-loader!sass-loader' 
}, 

Answer 2

Вы используете StyleUrls вместо Styles

Изменение styleUrls: ['app/header/header.component.scss'] по styles: [ String(require('./header.component.scss')) ]

Подробнее https://stackoverflow.com/a/38349028/689429

обновленных ошибок при необходимости

Answer 3

Командной строки в папке проекта, где существующий package.json является: npm install node-sass sass-loader raw-loader --save-dev

В webpack.common.js, поиск «погрузчики:» и добавить этот объект к концу массив погрузчиков (не забудьте добавить запятую в конце предыдущего объекта):

{ 
    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 {} 

Answer 4

В моем проекте это то, что я использовал.

форм-automobile.component.ts

@Component({ 
    selector: 'form-automobile', 
    templateUrl: './form-automobile.component.html', 
    styleUrls: ['./form-automobile.component.scss'], 
}) 

форм-automobile.component.scss

$myuglycolor: lime; 

label { 
    width: 100%; 
    background-color: $myuglycolor 
} 

webpack.config.common.js

{ 
    // Load component styles here. When loaded with styleUrls in component, array of string of styles is expected. 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loader: ['css-to-string-loader','css-loader','sass-loader'] 
}