1

我正在尝试将一些 SCSS 导入到 Javascript 文件中，结果好坏参半。我发现这有效：

样式.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 字符串？

4

1 回答 1

0

两个 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;
于 2021-01-05T16:38:17.380 回答