Javascript 将SCS作为字符串导入

我正在尝试将一些SCS导入一个Javascript文件，结果好坏参半。我发现这是有效的：

style.styleString.scss

body {
    background: #556;
}

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

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

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

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

index.js

body {
    background: #556;
}

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

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

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

已正确编译为文件，并且控制台中已正确打印

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: /\.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

body {
    background: #556;
}

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

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

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

仍然正确地呈现到文件）

我做错了什么？我的印象是使用内联

语法就像在配置文件中排列加载程序一样，但我显然遗漏了一些东西

是否可以在我的网页配置中将加载SCSS文件设置为CSS字符串？
两个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;

从“迷你css提取插件”导入迷你CSSExtract插件；
从“路径”导入路径；
常量配置={
模式：“发展”，
条目：{
“app”：“/src/index.js”，
},
输出：{
path:path.resolve（process.cwd（），“dist”），
文件名：“[name].js”，
},
模块：{
规则：[
{
测试：/\.stringStyle.scss$/i，
使用：[
“原始装载机”，
“sass加载器”，
],
},
{
测试：/（？两个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;

从“迷你css提取插件”导入迷你CSSExtract插件；
从“路径”导入路径；
常量配置={
模式：“发展”，
条目：{
“app”：“/src/index.js”，
},
输出：{
path:path.resolve（process.cwd（），“dist”），
文件名：“[name].js”，
},
模块：{
规则：[
{
测试：/\.stringStyle.scss$/i，
使用：[
“原始装载机”，
“sass加载器”，
],
},
{
测试：/（？看起来您的文件
/style.stringStyle.scss
已被两条规则中断，而不仅仅是您定义的一条规则（在您定义的规则下面还有一条规则）所以这很可能是我所关心的问题guess@tmhao2005啊！没有意识到可以应用两个规则-以为它只会选择第一个匹配测试。添加一个反向查找修复了问题。谢谢！看起来您的文件
/style.stringStyle.scss
被两个规则中断，而不是您定义的唯一规则（还有一个低于您定义的规则）因此很可能是我的问题guess@tmhao2005啊！没有意识到两个规则可以适用-以为它只会选择第一个匹配测试。添加一个否定的查找解决了问题。谢谢！