未找到模块：错误：无法解析“sass-loader”答案

【问题标题】：Module not found: Error: Can't resolve 'sass-loader'未找到模块：错误：无法解析“sass-loader”
【发布时间】：2018-05-06 22:18:43
【问题描述】：

webpack 新手。试图让 sass-loader 与我的反应项目配合得很好，遵循教程。配置似乎正确，但结果始终是“无法解析 'sass-loader'”。

我怀疑这是一个非常明显的错误，但没有多少搜索或谷歌搜索让我找到它。任何帮助表示赞赏。

错误

ERROR in ./ui/index.js
Module not found: Error: Can't resolve 'sass-loader' in '/root/src'
 @ ./ui/index.js 19:0-33
 @ multi webpack-hot-middleware/client?reload=true babel-polyfill ./ui/index.js

到目前为止我所做的（在上述预先存在的反应项目上）：

npm i --save-dev node-sass sass-loader

package.json，在 devDependencies 下

"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"webpack": "~2.2.1",
"webpack-dev-middleware": "~1.12.0",
"webpack-hot-middleware": "~2.20.0",
"webpack-node-externals": "~1.6.0"

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './src/App';

require('./src/styles/main.scss');

ReactDOM.render(<HashRouter><App /></HashRouter>, 
document.getElementById('root'));

webpack.config.react.js：

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

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const sourcePath = path.join(__dirname, './ui');
const extractStyle = new ExtractTextPlugin('styles.css');

//======break to module rules=======

module: {
  rules: [
    {
      test: /\.jsx?$/,
      include: sourcePath,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react'],
      },
    },
    {
      test: /\.scss$/,
      include: sourcePath,
      exclude: /node_modules/,
      use: extractStyle.extract('sass-loader?sourceMap'),
    },
    {
      test: /\.css$/,
      exclude: sourcePath,
      loader: extractStyle.extract('css-loader'),
    },
  ],
},

//======= break again for plugins =====

plugins: [
  extractStyle,
  new HtmlWebpackPlugin({
    template: 'ui/index.html',
    title: 'name',
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
  }),
]

可能的混淆：这一切都在开发 docker 容器中运行。不过，它已被重建，并且 npm install 再次运行。

【问题讨论】：

误报 - npm 未正确处理安装。删除 node_modules 目录并重建解决了我们的大部分问题。

标签： webpack sass-loader

【解决方案1】：

进入项目并运行下面两个命令

npm install sass-loader -D

npm install node-sass -D

【讨论】：

错误！无法解决依赖关系：ERR！根项目中的 dev sass-loader@"*" 错误！冲突的对等依赖：webpack@5.40.0

【解决方案2】：

如上述评论 - 误报。在 Docker 图像缓存和 npm 之间的某个地方，sass-loader 和 node-sass 模块被报告为已安装，但实际上并未安装。通常的rm node_modules 和没有缓存技巧的重建修复了它。

【讨论】：

这里也一样。在使用新安装的包重新启动容器后，我总是需要docker-compose down app;docker-compose build --no-cache app。从未找到避免这种情况的方法

【解决方案3】：

在我的情况下，这是由于 'sass-loader' 和 'webpack' 之间的版本冲突。

在 package.json 文件中，我将sass-loader 版本降级为"^8.0.2"，然后运行npm update 命令。

这是最终的package.json代码

{
  "name": "My Vue3 App",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^8.1.1",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

【讨论】：

【解决方案4】：

对于我的 nuxt 应用程序，使用 AWS CodePipeline (Bitbucket) 部署到 AWS Elastic Beanstalk。什么有助于预先添加“npm install sass-loader”（这也适用于“npm install”）来构建脚本，不确定它是否是最好的方法，但它现在可以工作。

过程文件

web: npm run deploy

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "npm install sass-loader && npm run build && npm run start"
  }

【讨论】：

【解决方案5】：

使用下面的命令

npm install sass-loader -D

转到 webpack.config.js

module: {
        rules: [
           
       {     
          test: /\.scss$/,
         
            {          
                test: /\.css$/,
                use: [
                  
                  'css-loader',
                  'sass-loader'<-----------------------sass loader
                ]}
    
        ],

【讨论】：

【解决方案6】：

我遇到了这个问题，我在安装项目时解决了它

vue create project

下一个

然后手动选择

终于

【讨论】：