Import Sass variables into angular 5 component's typescript file

Asked Mar 16 '18 at 03:27

Active Mar 28 '18 at 16:26

Viewed 1,876 times

I want to share some scss variables with my javascript.

So far I have done the following but it isn't working.

Component

import * as variables from 'sass-variable-loader!../styles/_variables.scss';

.angular.cli.json

...
"scripts": [
  "../node_modules/sass-variable-loader/dist/index.js"
],
...

I also change the typings.d.ts file to accept files ending in .scss.

I realize I'm not adding the sass-variable-loader to a webpack configuration but doesn't angular use that under the hood anyways? Is there a way for me to add the sass-variable-loader without out explicitly specifying it in a webpack configuration?

Is there another way to load this file and share the variables with my typescript files?

EDIT

If I do import * as variables from '../styles/_variables.scss' then I get the error message Cannot find module from webpack during compilation.

edited Mar 28 '18 at 16:26

asked Mar 16 '18 at 03:27

christo8989

6,442
5
37
43

can you provide a sample plunk – Akanksha Gaur Mar 16 '18 at 06:04
where is your variable.scss, it could be a path issue – Akanksha Gaur Mar 16 '18 at 06:06
What error do you get? try `const styles = require('../styles/_variables.scss); (with correctly path)` – David Mar 16 '18 at 08:27
@David Require doesn't work in the angular app and I would like to do this without using require if it's possible. – christo8989 Mar 28 '18 at 16:13
@Akanksha It's definitely not a path issue. I will paste the error message. – christo8989 Mar 28 '18 at 16:23
@christo8989 did you figure this out? – Ryan How Jun 14 '18 at 13:28
@christo8989, Did you find a solution? – Gil Epshtain Jun 19 '18 at 16:18
I changed my solution so I won’t need this but I’ve been meaning to create a stackblitz to address the issue. I just haven’t had time. – christo8989 Jun 20 '18 at 17:51

Import Sass variables into angular 5 component's typescript file

0 Answers0