Javascript 无法使用ES 6模块导入语句使用css加载程序

index.js:

import foo from "./foo.js"; // works fine
import blah from "./blah.js"; // works fine

import css from "style-loader!css-loader!../content/site.css"; // fails with exception

我正在使用Webpack4.20.x。当我使用ES6模块导入语句导入并绑定CSS文件时，控制台中会出现异常（见下文），页面上不会加载CSS

例外情况：

import foo from "./foo.js"; // works fine
import blah from "./blah.js"; // works fine

import css from "style-loader!css-loader!../content/site.css"; // fails with exception

无法解析模块说明符 “样式加载器！css加载器！。/content/site.css”。相对参考文献 必须以“/”、“/”或“./”开头

我已将加载程序安装为开发依赖项

摘自package.json：

"devDependencies": {
    "css-loader": "^1.0.0",
    "lite-server": "^2.4.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }

我知道我可以在我的

webpack.config.json

中配置加载程序，但我想，只是为了练习，内联配置它们

我知道我可以使用CommonJS样式的webpack-

require（）

语法来代替ES 6模块样式的内联导入

import

，但我想先导入

我基本上是一个接一个地尝试每种语法

编辑

作为对@axm__;的回复，我要求webpack打包我的文件。下面是我的

webpack.config.js

当时的样子。当时我没有使用基于配置的加载程序

const path = require("path");

// How to use source maps, css, sass
module.exports = {
    mode: "production",
    entry: {
        index: path.resolve(__dirname, "scripts/index.js"),
        contact: path.resolve(__dirname, "scripts/contact.js"),
        about: path.resolve(__dirname, "scripts/about.js")
    }, 
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    /* module: {
        rules: [
            { 
                test: /\.css/, 
                use: [
                    { loader: "style-loader" },
                    { 
                        loader: "css-loader", 
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    } */
};

---

您是否直接在浏览器中导入

index.js

？您确定

webpack

首先绑定了代码，然后在浏览器中导入了绑定的代码吗。我刚刚测试了它，它似乎工作正常（webpack 4.20.2）@axm_uuuuu。是的，我要求webpack打包我的文件，并使用了

dist/[name].js中的文件。我已经编辑了这个问题，将我的
webpack.config.js
@axm\uuuuuu包含在内。另外，如果我使用内联webpack
require（）
模块加载程序或基于配置的加载程序，那么一切都可以正常工作。只有内联ES6模块加载器不感兴趣。如果直接导入模块而不为其分配变量，会发生什么情况？比如：
import“样式加载器！css加载器！”。/content/site.css将很快尝试并发布。目前正在做另一件事。