Compiling SASS file into CSS string in JavaScript with loader

Question

I have a situation where I need to get the CSS string generated from a SASS file which has been compiled in JavaScript.

I have got a solution working with just CSS, using raw-loader

https://github.com/webpack-contrib/raw-loader

Using the following code...

import css from '!!raw-loader!../css/styles.css';
console.log(css);

However for this I need to compile the SCSS manually before I do this step which I don't really want to do.

I would prefer to do something like this... notice it is an SCSS rather than CSS file

import css from '!!raw-loader!../css/styles.scss';
console.log(css);

But this returns some JavaScript instead, I already have a SCSS loader in my webpack config which looks like this.

        {
            test: /\.s[ac]ss$/i,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        insert: 'head', // insert style tag inside of <head>
                        injectType: 'singletonStyleTag' // this is for wrap all your style in just one style tag
                    }
                },
                'css-loader',
                'sass-loader'
            ]
        },

Ok, so I don't think raw-loader would be suitable as that's for importing files (and you don't have actual files). Do you have an example of the output JavaScript webpack is generating? — Frank Furter
– Frank Furter, Commented Nov 28, 2019 at 11:43
Thanks for your comment, I have figured out how to do this, I have posted my answer below — user3284707
– user3284707, Commented Nov 28, 2019 at 13:02

user3284707 · Accepted Answer · 2019-11-28 13:02:24Z

7

I have figured out how to do this...

import css from '!!css-loader!sass-loader!../css/styles.scss';

This puts it into an object which has the CSS as a string inside

answered Nov 28, 2019 at 13:02

user3284707

3,3533 gold badges46 silver badges82 bronze badges

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

2 Comments

Hikariztw Over a year ago

Shouldn't it been import css from '!raw-loader!sass-loader!../css/styles.scss';?

damnitrahul Over a year ago

If anyone trying to use this and getting an error this.getOptions is not a function. Use [email protected].

Collectives™ on Stack Overflow

Compiling SASS file into CSS string in JavaScript with loader

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related