How to import an external SCSS in Angular 2 class

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

You can add them into a constants file and just reference the constants.ts file. Return the custom styles as objects: custom_theme_red = { background: 'red' }.. You can apply them in your components referencing the NativeElement inside ElementRef — Miguel Lattuada
– Miguel Lattuada, Commented Apr 8, 2017 at 18:19
I think you are referring to using a simple key-val pair or may be I misunderstood! I wanted to use the entire SCSS file and pass it as a variable to set my document.style [dynamically]. This way, wanted to change entire application theme. But using require, my SCSS is not imported but am able to import a normal CSS file though — nsk
– nsk, Commented Apr 8, 2017 at 20:41

danwellman · Accepted Answer · 2017-04-08 18:22:53Z

2

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 :)

answered Apr 8, 2017 at 18:22

danwellman

9,4018 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nsk Over a year ago

I'm using ng-cli and they hid webpack inside! How do I know if Sass-launcher exists [probably its not there otherwise it would have identified and converted to CSS]

nsk Over a year ago

Plz can you share any references to make this work. I'm on angular-cli: 1.0.0-beta.26 node: 6.9.1 os: win32 x64

danwellman Over a year ago

So sorry, I've not used angular-cli. The configuration required for plain webpack + sass-loader can be seen here: webpack.js.org/guides/code-splitting-css

Collectives™ on Stack Overflow

How to import an external SCSS in Angular 2 class

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related