Webpack 4 - 模块解析失败：您可能需要适当的加载器来处理此文件类型

Question

我刚刚开始将我的 aspdotnet core Aurelia 项目升级到 3.0，使用升级的模板升级到我用于创建项目的模板。

我将我的文件（在之前的项目中有效）放入了这个新版本，结果我遇到了来自 webpack 的一堆错误，其中第一个错误在标题中概述。

Webpack 也已升级。这是我收到的第一个错误..

ERROR in ./ClientApp/public/public/public.css 1:0
    Module parse failed: Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    > @media (max-width: 767px) {
    |     /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
    |     .body-content {
     @ ./ClientApp/public/public/public.html
     @ ./ClientApp/boot.ts
     @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
     @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry es6-promise/auto aurelia-bootstrapper

找到了same problem，事实证明我没有加倍，所以它是别的东西..

我还检查了this 的问题，它的标题非常相似，但我相信 webpack 文件没问题，因为它适用于基本的 aurelia 文件..

This 问题虽然类似，但有一个稍微（看起来）的设置来挖掘，因为它有一个 webpack 开发文件。为此，这是我的 package.json，顶部有脚本：

{
    "name": "Jobsledger.API",
    "private": true,
    "version": "0.0.0",
    "scripts": {
        "lint": "tslint --project tsconfig.json",
        "webpack:Debug": "webpack --mode development",
        "webpack:Release": "webpack --mode production",
        "webpack:watch": "webpack --mode development --watch"
    },
    "devDependencies": {
        "aurelia-animator-css": "^1.0.4",
        "aurelia-api": "^3.2.1",
        "aurelia-binding": "2.3.1",
        "aurelia-bootstrap": "^0.1.20",
        "aurelia-bootstrapper": "^2.3.3",
        "aurelia-dialog": "^2.0.0-rc.5",
        "aurelia-event-aggregator": "^1.0.3",
        "aurelia-fetch-client": "^1.8.2",
        "aurelia-mask": "^2.0.1",
        "aurelia-pal": "^1.8.2",
        "aurelia-router": "^1.7.1",
        "aurelia-templating": "^1.10.2",
        "aurelia-validation": "^1.4.0",
        "aurelia-webpack-plugin": "^4.0.0",
        "au-table": "^0.1.14",
        "awesome-typescript-loader": "^5.2.1",
        "bootstrap": "^4.3.1",
        "clean-webpack-plugin": "^2.0.2",
        "css-loader": "^2.1.1",
        "es6-promise": "^4.2.6",
        "fetch": "^1.1.0",
        "file-loader": "^3.0.1",
        "font-awesome": "^4.7.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "isomorphic-fetch": "^2.2.1",
        "jquery": "^3.4.1",
        "mini-css-extract-plugin": "^0.6.0",
        "node-sass": "^4.12.0",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "tether": "^1.4.6",
        "tslint": "^5.16.0",
        "ts-loader": "^6.0.1",
        "typescript": "^3.4.5",
        "url-loader": "^1.1.2",
        "velocity-animate": "^2.0.5",
        "webpack": "^4.32.2",
        "webpack-cli": "^3.3.2"
    }
}

我想我可能需要修改 webpack 文件作为它提到的加载器。在此处显示 webpack 文件之前是导致第一个错误的 public.css 文件：

@media (max-width: 767px) {
    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
    .body-content {
        padding-top: 50px;
    }
}

现在是 webpack.config.js 文件

const path = require("path");
const webpack = require("webpack");
const { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const bundleOutputDir = "./wwwroot/dist";

module.exports = (env, argv) => {
    if ((!argv || !argv.mode) && process.env.ASPNETCORE_ENVIRONMENT === "Development") {
        argv = { mode: "development" };
    }
    console.log("mode =", argv.mode);
    const isDevBuild = argv.mode !== "production";
    const cssLoaders = ["css-loader", "postcss-loader"];
    const scssLoaders = [...cssLoaders, "sass-loader"];

    return [{
        target: "web",
        mode: isDevBuild ? "development" : "production",
        entry: { "app": ["es6-promise/auto", "aurelia-bootstrapper"] },
        resolve: {
            extensions: [".ts", ".js"],
            modules: ["ClientApp", "node_modules"]
        },
        output: {
            path: path.resolve(bundleOutputDir),
            // Asp.Net JavaScriptServices does not tolerate "/" in public path, see https://github.com/aspnet/JavaScriptServices/issues/1495
            publicPath: "dist/",
            filename: "[name].[hash].js",
            chunkFilename: "[name].[chunkhash].js",
            pathinfo: false
        },
        module: {
            rules: [
                { test: /\.(woff|woff2|png|eot|ttf|svg)(\?|$)/, use: { loader: "url-loader", options: { limit: 1, publicPath: "./" } } },
                { test: /\.ts$/i, include: [/ClientApp/], loader: "ts-loader" },
                { test: /\.html$/i, use: "html-loader" },
                { test: /\.css$/i, include: [/node_modules/], issuer: /\.html$/i, use: cssLoaders },
                { test: /\.css$/i, include: [/node_modules/], exclude: [/bootstrap.css$/, /font-awesome.css$/], issuer: [{ not: [{ test: /\.html$/i }] }], use: ["style-loader", ...cssLoaders] },
                { test: /\.css$/, include: [/bootstrap.css$/, /font-awesome.css$/], use: [{ loader: MiniCssExtractPlugin.loader }, ...cssLoaders] },
                { test: /\.scss$/i, issuer: /(\.html|empty-entry\.js)$/i, use: scssLoaders },
                { test: /\.scss$/i, issuer: /\.ts$/i, use: ["style-loader", ...scssLoaders] }
            ]
        },
        optimization: {
            splitChunks: {
                chunks: "all",
                // comment the following to avoid creatin a separate bundle for each npm module
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`;
                        }
                    }
                }
            }
        },
        devtool: isDevBuild ? "source-map" : false,
        performance: {
            hints: false
        },
        plugins: [
            new CleanWebpackPlugin(),
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
            new HtmlWebpackPlugin({ template: 'index.ejs', filename: "../../wwwroot/index.html", inject: false, metadata: {}, alwaysWriteToDisk: true }),
            new AureliaPlugin({ aureliaApp: "boot" }),
            new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
            new ModuleDependenciesPlugin({}),
            new MiniCssExtractPlugin({
                filename: "[name].[hash].css",
                chunkFilename: "[name].[chunkhash].css"
            })
        ],
        devServer: {
            contentBase: "wwwroot/",
            compress: true,
            writeToDisk: true,
            hot: false
        }
    }];
};

对于所有其他错误，我基本上得到了相同的错误：

You may need an appropriate loader to handle this file type.

所以它是某种类型的加载器..

我不确定我需要对 webpack 文件做些什么才能使这项工作..

Answer 1

您的 CSS 媒体查询语法错误。

你需要这样写：

@media {thing-you-want-to-query} and {case} {
    .body-content {
        padding-top: 50px;
    }

在你的情况下是屏幕：

@media screen and (max-width: 767px) {
    .body-content {
        padding-top: 50px;
    }