webpack - Webpack css-loader 找不到 index.js，style-loader 找不到 addStyles.js

Question

./app/index.scss 中的错误找不到模块：错误：无法解析 C:\Users\johnliang\Temp\webpack-angular 中的“文件”或“目录”./../node_modules css-loader/index.js /app@./app/index.scss 4:14-116 13:2-17:4 14:20-122

./app/index.scss 中的错误找不到模块：错误：无法解析 C:\Users\johnliang\Temp\webpack-angular 中的“文件”或“目录”./../node_modules style-loader/addStyles.js /app@./app/index.scss 7:13-68

index.scss 没有加载到最终的 webpack 输出中。

Answer 1

确保你使用

path.join(__dirname, 'src')

并不是

__dirname + '/src'

在你的 webpack.config.js 中：

var path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
...

Answer 2

我有一个类似的问题，我的 webpack 构建抱怨一个.js文件：

ERROR in ./node_modules/style-loader/lib/addStyles.js
Module not found: Error: Can't resolve './urls' in '/Users/<user>/path/to/project/node_modules/style-loader/lib'
 @ ./node_modules/style-loader/lib/addStyles.js 64:14-31

我一定是从某个教程的某个地方（或很多）复制了这个解决方案，但与我编写的另一个项目相比，我意识到我错过了 webpack 配置中解析属性的扩展名“.js”：

resolve: {
  extensions: [
    '.scss',
    '.css',
    '.js' // <-- HERE
  ]
},

这为我解决了这个问题，所以一定要试一试。