Import SCSS as string

Question

I'm trying to import some SCSS into a Javascript file with mixed results. I've found that this works:

style.styleString.scss

body {
    background: #556;
}

.test {
    &__child {
        color: red;
    }
}

index.js

import "./index.style"; // making sure that nothing we do breaks normal SCSS importing

const css = require("!!raw-loader!sass-loader!./style.stringStyle.scss").default;
console.log(css);

index.style.scss is correctly compiled to a file and style.stringStyle.scss is correctly printed in the console.

What I'd like to do is move this loader pipeline into my webpack config. This is what I have at the moment:

import MiniCssExtractPlugin from "mini-css-extract-plugin";
import path from "path";

const config = {
    mode: "development",
    entry: {
        "app": "./src/index.js",
    },
    output: {
        path: path.resolve(process.cwd(), "dist"),
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.stringStyle.scss$/i,
                use: [
                    "raw-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.scss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader:"css-loader",
                        options: {
                            url: false,
                        },
                    },
                    "sass-loader",
                ],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".scss", ".css"],
    },
    devtool: "source-map",
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
    ],
};

export default config;

index.js

import "./index.style"; // making sure that nothing we do breaks normal SCSS importing

const css = require("./style.stringStyle.scss").default;
console.log(css);

With this configuration, an empty string is printed to the console (index.style.scss still correctly renders to a file).

What am I doing wrong here? I was sort of under the impression that using the inline ! syntax in imports works just like lining up loaders in the config file, but I'm clearly missing something.

Is it possible to setup loading SCSS files as CSS strings in my Webpack config?

Looks like your file `/style.stringStyle.scss` has been interrupted by 2 rules not only one rule as you defined (one more is below your defined rule) so it's likely the issue I guess — tmhao2005, Jan 05 '21 at 03:21
@tmhao2005 ah! Didn't realize two rules could apply - thought it would just pick the first matching test. Adding a negative lookbehind fixed the problem. thanks! — Sandy Gifford, Jan 05 '21 at 16:34

score 1 · Accepted Answer · answered Jan 05 '21 at 16:38

Both SCSS tracking rules are getting applied to style.stringStyle.scss. Adding a negative look-behind to the normal import rule's test regex will make sure only the correct rule is selected:

import MiniCssExtractPlugin from "mini-css-extract-plugin";
import path from "path";

const config = {
    mode: "development",
    entry: {
        "app": "./src/index.js",
    },
    output: {
        path: path.resolve(process.cwd(), "dist"),
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.stringStyle.scss$/i,
                use: [
                    "raw-loader",
                    "sass-loader",
                ],
            },
            {
                test: /(?<!\.stringStyle)\.scss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader:"css-loader",
                        options: {
                            url: false,
                        },
                    },
                    "sass-loader",
                ],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".scss", ".css"],
    },
    devtool: "source-map",
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
    ],
};

export default config;

Import SCSS as string

1 Answers1