javascript - 如何在 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 'require' var 导入，我也无法使用此 scss。请问如何导入外部JS/SCSS文件

Answer 1

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

你绝对可以使用 ES2015 import使用 Webpack 2 导入 SCSS 文件的声明 - 我刚刚为一个小项目完成了它:)