Question

我需要使用webpack作为脚本（不是典型的配置文件）并且能够支持css导入，但webpack / style-loader似乎无法加载css导入当它在根目录之外时。

directoryA /的package.json

{
  "name": "poc",
  "version": "1.0.0",
  "description": "",
  "main": "poc.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "style-loader": "^0.28.8",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0"
  }
}

directoryA / poc.js

const path = require("path");
const webpack = require("webpack");

let appPath = process.env.PWD;

webpack({
  entry: path.join(appPath, 'app.js'),
  context: appPath,
  output: {
    libraryTarget: 'umd',
    path: path.join(appPath, 'out'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}).run(() => {
  console.log("done");
});

directoryB / app.js

import './foo.css';

directoryB / foo.css

body {   background-color: blue; }

directoryB /缩小/ index.html中

<html>
  <head><script src="app.js"></script></head>
  <body></body>
</html>

要复制的步骤：

cd directoryB/
node ../directoryA/poc.js

然后在浏览器中打开directoryB / out / index.html

结果：＆＃34;错误：找不到模块＆＃34; ./ foo.css＆＃34;
预期：加载css样式并获取蓝页

注意，如果out / index.html，app.js和foo.cs位于directoryA中，那么运行节点poc.js实际上会产生预期的结果，但是在外面，webpack或style-loader不能似乎找到了该文件（注意：也尝试使用modules:指令。如果使用导入js文件，这两种情况都有效）

找不到模块＆＃34; ./ foo.css＆＃34;当使用webpack作为脚本时

0 个答案: