I get this error when i try to run npm run dev
to compile my scss to css. I know that issue is related to @import
ERROR in ./src/scss/m
The issue is within your module.rule
for handling SASS related files within your project. Within your rule you're only including the SASS files from within your <path>/src/sass/
directory to be compiled into CSS:
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'src', 'sass')
],
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
However, a quick scan of your directory structure shows that your index.js
file is actually importing your main.scss
file from within the src/scss/
directory:
index.js:
import "./scss/main.scss";
.
This is a problem because your SASS rule is only going to compile SASS related files to CSS from within the src/sass
directory, but your SASS related files are actually located within your src/scss
directory.
Therefore, your SASS files are never actually compiled to CSS appropriately.
To resolve this either remove the include
part all together or change the include location to the correct path location of your SASS files:
include: [
path.resolve(__dirname, 'src', 'scss')
],
Another thing I would consider doing is adding the .scss
extension to your imports within your main.scss
file:
@import "header.scss";
or alternatively adding a resolve section within your webpack.config.js
file so you can simplify your imports and still have webpack handle them appropriately. Something along the lines of:
resolve: {
extensions: ['.js', '.jsx', '.scss']
}
Hopefully that helps!
I fixed these similar issue by following these link.
I updated rule
section of webpack.config.js
as follows
rules: [
{
test: /\.css$/,
use : [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
}
]
}
]
Then installed the dependencies as follows.
using yarn
yarn add style-loader --dev
yarn add css-loader --dev
using npm
npm install style-loader --save-dev
npm install css-loader --save-dev
To solve this problem for Webpack 4
, first install sass-loader
, node-sass
, style-loader
, and css-loader
via npm
:
npm install sass-loader node-sass style-loader css-loader --save-dev
Then add this rules to the webpack.config.js
:
module.exports = {
module: {
rules: [
// ...Other rules,
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
};
Note: The order is important, e.g: Don't put css-loader
before style-loader
or you'll probably get weird erros!