如何在 ejs 文件中使用带有资产/源的内联 webpack 加载器答案

【问题标题】：How to use inline webpack loader with asset/source in ejs file如何在 ejs 文件中使用带有资产/源的内联 webpack 加载器
【发布时间】：2021-10-25 15:40:46
【问题描述】：

我在 ejs 文件中有一个表达式，我想将它移植到 webpack 5。

index.html.ejs

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <base href="/" target="_blank">
    <style>
        <%=require("!!raw?sass-loader!./src/styles.scss").default %>
    </style>
</head>

<body>
    <div id="root">
    </div>
</body>

</html>

这里没有什么特别的，只有inline webpack loader、sass-loader和raw-loader

Assets Modules guide doesn't mention anything useful

我试图幸运!!raw?sass-loader!../../src/styles.scss，但这比我想象的要棘手。

这会引发错误

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve 'raw' in 'C:\Users\user\source\repos\App\App'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'raw' in 'C:\Users\user\source\repos\App\App'
      at C:\Users\user\source\repos\App\App\node_modules\webpack\lib\Compilation.js:1773:28

非常感谢您的帮助

webpack.config.js


const config = {
    entry: {
        app: "./src/index.tsx",
    },
    output: {
        path: resolve(__dirname, "wwwroot/dist"),
        publicPath: "/",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".json", ".scss", ".js", "png", "svg", "jpg", "gif", "mp3"],
        plugins: [
            new TsconfigPathsPlugin({ baseUrl: "src" }),
        ]
    },
    module: {
        rules: [
            {
                test: /styles\.scss$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sassOptions: {
                                includePaths: [resolve(__dirname, "src/styles")],
                            },
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                exclude: /styles\.scss$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            importLoaders: 1,
                            modules: {
                                localIdentName: "[name]__[local]--[hash:base64:5]",
                            },
                        }
                    },
                    {
                        loader: "postcss-loader",
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                            sassOptions: {
                                includePaths: [resolve(__dirname, "src/styles")],
                            },
                        }
                    },
                ]
            },
            {
                resourceQuery: /raw/,
                type: "asset/source",
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                loader: "ts-loader",
                options: {
                    configFile: "tsconfig.json"
                }
            },
            {
                test: /\.(png|jpe?g|gif|mp3)$/i,
                type: "asset/resource",
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "index.html.ejs",
        })
    ]
};

export default config;

【问题讨论】：

你能在回购中复制这个问题吗？

标签： webpack ejs webpack-5

【解决方案1】：

我在阳光下尝试了每一种组合，显然下面的表达就像一个魅力。

<style>
   <%=require("!sass-loader!./src/styles.scss?raw") %>
</style>

【讨论】：