I have a main Stylesheet style.scss
, which I imported in my main JavaScript file script.js
:
import "./style.scss";
This works great, and I could build my website that way in dev mode. Now I wanted to try and use separate Stylesheet and import them in my main stylesheet with the @import
rule, like so:
@import "./blocks/SCSS/test.scss" screen and (min-width: 600px);
But now I get this error message:
ERROR in ./dev/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./dev/style.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './blocks/SCSS/test.scss' in 'D:Art FilesDesignEigene ProjekteWP Book Theme Devdev'
And I don’t understand why it can’t resolve it. I use modules for my JavaScript as well, which works great. But now with SCSS, it does not work at all.
I tried googling for a solution and checked out several open threads, none could help me.
Here are some I checked out on Stackoverflow:
- Module build failed (from ./node_modules/postcss-loader/src/index.js)
- Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
- Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
- Webpack: getting this error: build failed (from ./node_modules/css-loader/dist/cjs.js):
My Node version was 12.18.3
, where I had the error first. Now I updated my node to the LTS to 14.15.4
, still the same error.
Here are my Webpack config files:
// webpack.common.js
const path = require("path");
module.exports = {
entry: "./dev/script.js",
module: {
rules: [
{
test: /.html$/i,
use: ["html-loader"],
},
{
test: /.(svg|png|jpg)$/i,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[hash].[ext]",
outputPath: "assets/images",
},
},
},
],
},
};
// webpack.dev.js
const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: "./dev/post.html",
}),
],
module: {
rules: [
{
test: /.scss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
devServer: {
contentBase: "./dist",
},
output: {
filename: "script.dev.js",
path: path.resolve(__dirname, "dist"),
publicPath: "./",
},
});
Here are my webpack dependencies:
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.3",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass": "^1.32.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.1",
"webpack-merge": "^5.7.3"
},
Advertisement
Answer
This is what I did to fix my problem. Amaresh already mentioned something, about what I might be missing, but that didn’t help me out with my problem, as I was given no real explanation on why that would help.
In the end, I did install sass
*, and since node-sass
is deprecated, I didn’t pay any mind to it.
The way I used @import
was probably wrong. I was trying to do it the native CSS way (MDN), but SCSS might have been overwriting that. @import
by SCSS is also deprecated by now and not recommended. When I rechecked the SCSS Website, I went to their guide on how to use SCSS, and they mentioned how I could use @use
to import another stylesheet. What I learned was that I need to use Partials. I had to lead filenames with an underscore to create a namespace for that, and import it using the @use
rule.
From their example:
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
* I don’t know if the installation of sass
actually helped or not. Since the package is dealing with JavaScript, which I have not done so in my file. But since the package is also mentioned in the sass-loader
, I will keep it.
What is important to remember when using @use
is how you handle the file in the new file.
// src/_list.scss
@mixin list{
ul {
display: flex;
flex-direction: row;
li {
text-align: center;
padding: 5px;
}
}
}
By only calling the URL, you have to specify the namespace and then what you want to use from that namespace.
// styles.scss
@use "src/list";
header {
@include list.list;
}
You can call a new namespace and give it a custom name.
// styles.scss
@use "src/list" as myList;
header {
@include myList.list;
}
Or you can call it and name it with an asterisk, making it available, without having to write the namespace when calling it.
// styles.scss
@use "src/list" as *;
header {
@include list;
}
For further reading, please check out their documentation on @use
.