模块未找到：错误：无法解决'sass-loader'

Question

刚接触webpack。试图让sass-loader与我的react项目协同工作，已经按照教程进行了操作。配置似乎正确，但结果总是“无法解析'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

到目前为止我所做的事情（在现有的react项目上）：

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，但仍有可能存在混杂因素。

- paraxial

---

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

Answer 1

前往项目并运行以下两个命令

npm install sass-loader -D

npm install node-sass -D

- Ishan Liyanage

---

错误！无法解析依赖项： 错误！来自根项目的 dev sass-loader@"*"。 错误！存在冲突的同级依赖项：webpack@5.40.0。 - danielh

Answer 2

该问题可能是由缓存造成的。无需重新启动项目。 在终端上运行以下命令。

rm -r node_modules

npm install

npm install -D sass-loader@^10 sass

- Miebaka

Answer 3

就像上面的评论所说——虚假警报。在Docker镜像缓存和npm之间，sass-loader和node-sass模块被报告为已安装，但实际上并未安装。通常的rm node_modules并且使用没有缓存的方式重新构建可以解决这个问题。

- paraxial

---

一样的情况。每次在重新启动一个安装了新包的容器后，我总是需要运行 docker-compose down app;docker-compose build --no-cache app。从未找到避免这种情况的方法。 - Pierre de LESPINAY

要使其生效，应该执行rm -r node_modules命令。 - Macumbaomuerte

Answer 4

在我的情况下，这是由于“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"
  ]
}

- npcoder

Answer 5

这个答案确实对我有帮助：问题已解决

你可以尝试执行以下命令

npm install -D sass-loader@^10 sass

- Cyebukayire

Answer 6

我之前遇到了这个问题，但是在安装我的项目后，我解决了它。

vue create project

下一步

然后手动选择

最终

- Samira

Answer 7

使用以下命令

npm install sass-loader -D

前往 webpack.config.js 文件

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

- Balaji

Answer 8

对于我的nuxt应用程序，使用AWS CodePipeline（Bitbucket）部署到AWS Elastic Beanstalk。在构建脚本中添加“npm install sass-loader”（这也可以是“npm install”）有所帮助，不确定是否是最佳方式，但目前它可以工作。

Procfile

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"
  }

- atazmin

Answer 9

我正在卸载一个包，但在vue3中出现了以下错误 -> 无法解析加载器：sass-loader。您可能需要安装它。

已删除所有卸载的包，但我忘记了一行更改。

src/App.vue

-旧

<style lang="scss"> . .

-新-这是正确的

<style> . . </style>

- Berkay Nayman