Module not found: Error: Can't resolve 'sass-loader'
Module not found: Error: Can't resolve 'sass-loader'
webpack 的新手。尝试让 sass-loader 与我的 React 项目配合得很好，已遵循教程。配置似乎正确，但结果总是 "Can't resolve '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 再次具有 运行。
如上评论 - 误报。在 Docker 图像缓存和 npm 之间的某个地方，sass-loader 和 node-sass 模块被报告为已安装，但实际上并未安装。通常的 rm node_modules 和没有缓存技巧的重建修复了它。
转到项目和运行下面两个命令
npm install sass-loader -D
npm install node-sass -D
对于我的 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"
}
使用下面的命令
npm install sass-loader -D
转到webpack.config.js
module: {
rules: [
{
test: /\.scss$/,
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader'<-----------------------sass loader
]}
],
在我的例子中，这是由于 '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"
]
}
我有这个问题，我在安装我的项目时解决了它
vue create project
下一个
select 手动然后
终于
这个答案对我有帮助：
你可以试试
npm install -D sass-loader@^10 sass
这个问题可能是缓存的结果。无需重新启动项目。
运行终端上如下
rm -r node_modules
npm install
npm install -D sass-loader@^10 sass
我正在卸载软件包，这是 vue3 的错误 -> 无法解析加载器：sass-loader
您可能需要安装它。
删除了所有卸载包，但我忘记了在线更改
src/App.vue
-旧
webpack 的新手。尝试让 sass-loader 与我的 React 项目配合得很好，已遵循教程。配置似乎正确，但结果总是 "Can't resolve '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 再次具有 运行。
如上评论 - 误报。在 Docker 图像缓存和 npm 之间的某个地方，sass-loader 和 node-sass 模块被报告为已安装，但实际上并未安装。通常的 rm node_modules 和没有缓存技巧的重建修复了它。
转到项目和运行下面两个命令
npm install sass-loader -D
npm install node-sass -D
对于我的 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"
}
使用下面的命令
npm install sass-loader -D
转到webpack.config.js
module: {
rules: [
{
test: /\.scss$/,
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader'<-----------------------sass loader
]}
],
在我的例子中，这是由于 '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"
]
}
我有这个问题，我在安装我的项目时解决了它
vue create project
下一个
select 手动然后
终于
这个答案对我有帮助：
你可以试试
npm install -D sass-loader@^10 sass
这个问题可能是缓存的结果。无需重新启动项目。
运行终端上如下
rm -r node_modules
npm install
npm install -D sass-loader@^10 sass
我正在卸载软件包，这是 vue3 的错误 -> 无法解析加载器：sass-loader 您可能需要安装它。
删除了所有卸载包，但我忘记了在线更改
src/App.vue
-旧