将 SCSS 导入为字符串

问题描述

我正在尝试将一些 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,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 字符串？

解决方法

这两个 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,resolve: {
        extensions: [".js",".scss",".css"],devtool: "source-map",plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",}),};

export default config;