New to webpack. Trying to get sass-loader to play nice with my react project, have followed tutorials. Config seems correct, but result is always "Can't resolve 'sass-loader'".
I suspect this is some glaringly obvious error, but no amount of searching for it or googling has led me to it yet. Any help appreciated.
Error
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
What I have done so far (on said pre-existing react project):
npm i --save-dev node-sass sass-loader
package.json, under 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'),
}),
]
Possible confounder: This is all running in a development docker container. It's been rebuilt and npm install has run again, though.
9 Answers
Go to the project and run below two commands
npm install sass-loader -D
npm install node-sass -D
As in above comment - false alarm. Somewhere between Docker image caching and npm, the sass-loader and node-sass modules were reported as being installed, while not actually being installed. The usual rm node_modules and rebuilding with no cache trick fixed it.
This issue may be a result of caching. There's no need to restart the project.
Run the following on the terminal
rm -r node_modules
npm install
npm install -D sass-loader@^10 sass
In my case, it was due to version conflict between 'sass-loader' and 'webpack'.
In package.json file, I down graded the sass-loader version to "^8.0.2", then I ran npm update command.
Here is the final package.json code
{
"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"
]
}
For my nuxt app, deploying using AWS CodePipeline (Bitbucket) to AWS Elastic Beanstalk. What helped prepending "npm install sass-loader"(this have worked too "npm install")to build script, not sure if it is best way but it works for now.
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"
}
use Below Command
npm install sass-loader -D
Go to webpack.config.js
module: {
rules: [
{
test: /\.scss$/,
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader'<-----------------------sass loader
]}
],
I had this problem and I solved it when I installed my project
vue create project
next
select manually then
finally
i am uninstall package and was this error for vue3 -> Failed to resolve loader: sass-loader You may need to install it.
removed for all uninstall packages but i was a to forget in line change
src/App.vue
-OLD
< style lang="scss" > . .
-NEW - THIS TRUE
< style > . . < /style >
