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

Question

I have to use the scss defined elsewhere, to be used inside my @Injectable class

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);
    }
...

For some reason, am not able to use this scss even though I imported via NodeJS 'require' var. May I know how to import an external JS/SCSS file

Answer 1

You'll need to incorporate some kind of SASS preprocessor in your tool chain. I'd recommend Webpack which can use the sass-launcher, css-launcher, and style-launcher together to read your SCSS file import, convert the SASS to CSS, and inline it into a <style> element in the head of your page, or into your JS bundle.

You can definitely use the ES2015 import statement to import SCSS files using Webpack 2 - I've just done it for a small project :)