如何在Angular 2类中导入外部SCSS

Question

我必须使用其他地方定义的scss，才能在@Injectable类中使用

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

const customThemeRed = require('../../common/styles/custom/themes/custom-theme-red.scss');

@Injectable()
export class MyThemesService {
    constructor() {
        console.log('customThemeRed is' + customThemeRed);
    }
...

出于某种原因，即使我通过NodeJS导入，也无法使用此scss，并且需要＆＃39;变种。我可以知道如何导入外部JS / SCSS文件

Answer 1

您需要在工具链中加入某种SASS预处理器。我建议Webpack可以同时使用sass-launcher，css-launcher和style-launcher来读取您的SCSS文件导入，将SASS转换为CSS，并将其内联到<style>元素在您的页面的头部，或在您的JS包中。

您绝对可以使用ES2015 import语句使用Webpack 2导入SCSS文件 - 我刚刚为一个小项目完成了它：）