I just figured it out. We should be using Sass Modules instead of @import. Also, this video helped me a lot: https://www.youtube.com/watch?v=CR-a8upNjJ0
When I replaced @import with @use it started working.
webpack
webpack.js.org › loaders › sass-loader
sass-loader | webpack
Webpack provides an advanced mechanism to resolve files. The sass-loader uses Sass's custom importer feature to pass all queries to the webpack resolving engine, enabling you to import your Sass modules from node_modules.
webpack
docs.webpack.js.org › loaders › sass-loader
sass-loader - webpack
sass-loader compiles Sass/SCSS to CSS. It uses Dart Sass (recommended), Node Sass, or Sass Embedded as the compiler. Use it with css-loader and style-loader to add Sass support to your webpack project.
Webpack 5 sass-loader not compiling nested scss files - Stack Overflow
I am setting up Webpack for my first time and I am getting stuck on the Sass part. I have a file structure like this: src (dir) styles (dir) utilities (dir) test.scss index.scss (this is in the... More on stackoverflow.com
Are there any sass loaders that work with webpack 4?
You can install extract-text-webpack-plugin@next for webpack 4. Obviously this comes with all the caveats of a non-stable release. More on reddit.com
22
10
April 5, 2018sass-loader doesn't work with :root declarations or css custom props
System: OS: macOS 11.6 CPU: (4) ... babel-loader: ^8.2.3 => 8.2.3 browser-sync-webpack-plugin: ^2.3.0 => 2.3.0 file-loader: ^6.2.0 => 6.2.0 lodash-webpack-plugin: ^0.11.6 => 0.11.6 sass-loader: ^12.6.0 => 12.6.0 webpack: ^5.69.0 => 5.69.0 webpack-bundle-analyzer: ^4.5.0 ... More on github.com
11
css/sass loader not working with regular import, but fine with inline loaders.
import css/scss: webpack config aren't working, but inline loaders does the job. I have loaders in my webpack.config.js, and are similar to my current project ones (where it works) importing th... More on github.com
12
Videos
04:38
Webpack Tutorial for Beginners #6 - SASS Loaders - YouTube
Webpack CSS Loader | Webpack SCSS Loader
Webpack 5 Fundamentals - 5. CSS & SCSS Loaders
17:16
Webpack 2 - Style, CSS and Sass loaders - YouTube
01:07
How to Fix sass-loader Error in React || Importing sass or scss ...
Webpack Loaders, CSS, & SASS - YouTube
GitHub
github.com › webpack-contrib › sass-loader › releases
Releases · webpack/sass-loader
October 23, 2025 - Compiles Sass to CSS. Contribute to webpack/sass-loader development by creating an account on GitHub.
Author webpack
Top answer 1 of 2
5
I just figured it out. We should be using Sass Modules instead of @import. Also, this video helped me a lot: https://www.youtube.com/watch?v=CR-a8upNjJ0
When I replaced @import with @use it started working.
2 of 2
0
this is my configs object for scss, and it's working with import.
You would need to install autoprefixer and add a css-loader and a style-loader loaders
{
test: /\.scss$/i,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
},
GitHub
github.com › shakacode › sass-resources-loader
GitHub - shakacode/sass-resources-loader: SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.
SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc. - shakacode/sass-resources-loader
Starred by 974 users
Forked by 63 users
Languages JavaScript 90.4% | SCSS 7.2% | Shell 1.2% | HTML 1.1% | CSS 0.1% | JavaScript 90.4% | SCSS 7.2% | Shell 1.2% | HTML 1.1% | CSS 0.1%
Medium
medium.com › nerd-for-tech › intro-to-webpack-loaders-723fcd717821
Intro to Webpack Loaders!. Do you know how webpack loaders work? | by Saravanan M | Nerd For Tech | Medium
August 4, 2024 - Finally, style-loader helps in dynamically injecting the transformed CSS into the DOM at runtime.. This sequence ensures that each transformation builds on the previous one, creating a pipeline that processes and transforms your assets step-by-step. Identify File: Webpack encounters a file during its bundling process.
webpack
webpack.js.org › loaders › style-loader
style-loader | webpack
webpack.config.js · Copy · const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const devMode = process.env.NODE_ENV !== "production"; module.exports = { module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ devMode ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader", ], }, ], }, plugins: [devMode ?
Reddit
reddit.com › r/javascript › are there any sass loaders that work with webpack 4?
r/javascript on Reddit: Are there any sass loaders that work with webpack 4?
April 5, 2018 -
Hi, I'm painfully new to webpack. I'm starting right off the bat with webpack 4, and I understand the concept of input/output.
I understand the concept of loaders/plugins too (at a very basic level) but sass-loader seems to rely on something called extract-text-webpack-pluginwhich isn't supported in webpack 4.
How are webpack 4 users getting around this? Surely Sass support is an essential feature for most developers...
Top answer 1 of 8
10
You can install extract-text-webpack-plugin@next for webpack 4. Obviously this comes with all the caveats of a non-stable release.
2 of 8
9
Completely unhelpful: I switched back to webpack 3. I tried for several days to find a work around but as you soon realise with programming: often there’s a better way. I love webpack and I’m sure that they’ll work out the kinks in extract-text-plugin.. but right now I need to get work done and can’t wait for the version 4 ecosystem to become stable. YMMV.. Good luck anyhow!
DEV Community
dev.to › deepanjangh › setting-up-css-and-sass-with-webpack-3cg
Setting up CSS and Sass with Webpack!! - DEV Community
November 20, 2022 - sass-loader loads a Sass/SCSS file and compiles it to CSS. Now let's update the webpack.config.js.
Medium
medium.com › @bogna.ka › working-with-webpack-and-styles-a7a2f31ee6b4
Webpack and Sass
February 28, 2017 - The sass-loader is used for compiling scss to css and the css-loader is used for loading css. The last thing we need to change is the import in the example/index.js — the entry file.
Next.js
nextjs.org › docs › app › getting-started › css
Getting Started: CSS | Next.js
2 weeks ago - Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.
GitHub
github.com › webpack-contrib › sass-loader › issues › 1027
sass-loader doesn't work with :root declarations or css ...
February 17, 2022 - Bug report I think sass-loader has troubles either with :root declarations or with css custom properties. Actual Behavior This can be seen here: ERROR in ../scss/front-page.scss 1:0 Module parse failed: Unexpected token (1:0) File was pr...
Author stratboy
GitHub
github.com › storybookjs › storybook › issues › 3982
css/sass loader not working with regular import, but fine with inline loaders. · Issue #3982 · storybookjs/storybook
May 7, 2018 - I have loaders in my webpack.config.js, and are similar to my current project ones (where it works) importing this way: require('./_styles.scss'); Throws You may need an appropriate loader to handle this file type. But doing: require ('!style-loader!css-loader!postcss-loader!sass-loader!./_style.scss'); It works.
Author Vincent-Alexandrine
Carter Bancroft
carterbancroft.com › sass-and-webpack
Using @use With Sass and Webpack
October 26, 2019 - If you want to use Sass's @use instead of their @include (which is deprecated) and you're using Webpack with sass-loader you need to use Dart Sass via npm install sass NOT npm install dart-sass and not node-sass or any other sass package.
Next.js
nextjs.org › docs › app › getting-started › fetching-data
Getting Started: Fetching Data | Next.js
2 weeks ago - Learn how to fetch data and stream content that depends on data.
webpack
webpack.js.org › loaders › postcss-loader
postcss-loader | webpack
A loader to process CSS using PostCSS. You need webpack v5 to use the latest version.
GitHub
github.com › webpack › sass-loader › issues › 536
Webpack import sass issue · Issue #536 · webpack/sass-loader
February 8, 2018 - my index.css has @import 'css/base.scss'; and my index.js has import 'style-loader!css-loader!sass-loader!./index.scss'; If this is a feature request, what is motivation or use case for changing the behavior? Im using yeoman fountain web-app to scaffold project, did that to stop loading styles from web and start loading my own styles, which was not as simple as I thought Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Author webpack-bot
Medium
medium.com › @cesarkohl › sass-to-css-crash-course-c07ae2c4daf0
Sass to CSS Crash Course. Installation for webpack and WebStorm | by Cesar Kohl | Medium
July 12, 2020 - $ touch webpack.config.js $ npm install --save-dev node-sass sass-loader style-loader css-loader mini-css-extract-plugin
Bootstrap
getbootstrap.com › docs › 5.3 › getting-started › webpack
Bootstrap and Webpack · Bootstrap v5.3
Here’s a recap of why we need all these loaders. style-loader injects the CSS into a <style> element in the <head> of the HTML page, css-loader helps with using @import and url(), postcss-loader is required for Autoprefixer, and sass-loader allows us to use Sass.