Question

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模块import语句导入和捆绑CSS文件时，控制台中出现异常（请参见下文），并且CSS不在页面上加载。

例外：

无法解析模块说明符 “ style-loader！css-loader！../ content / site.css”。相对参考必须以“ /”、“./”或“ ../”开头。

我已经将装入程序安装为dev依赖项。

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
                        }
                    }
                ]
            }
        ]
    } */
};

无法通过ES 6模块导入语句使用css-loader

0 个答案: