将 SCSS 作为字符串导入

Question

我正在尝试将一些 SCSS 导入到 Javascript 文件中，但结果不一。我发现这行得通：

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 已正确编译为文件，style.stringStyle.scss 已正确打印在控制台中。

我想做的是将这个加载器管道移到我的 webpack 配置中。这是我目前拥有的：

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

使用此配置，一个空字符串将打印到控制台（index.style.scss 仍然正确呈现到文件）。

我在这里做错了什么？我的印象是在导入中使用内联 ! 语法就像在配置文件中排列加载程序一样，但我显然遗漏了一些东西。

是否可以在我的 Webpack 配置中将 SCSS 文件设置为 CSS 字符串？

Answer 1

两个 SCSS 跟踪规则都应用于 style.stringStyle.scss。向正常导入规则的测试正则表达式添加否定回顾将确保只选择了正确的规则：

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;

将 SCSS 作为字符串导入

Import SCSS as string

javascript

webpack

sass-loader

raw-loader