How to enable SASS Modules in Webpack 4 - css

Question

In my Node React web application written in TypeScript and TSX, I make use of CSS modules. Hence, when building the application I instruct Webpack to create a style.css.d.ts file out of a style.css so that I can access its classes like any other param by importing the CSS file into the TypeScript class with import * as style from "./style.css"; and then access the params like this:
export class Foot extends React.Component<FootProps, {}> {
render() {
return <div className={style.foot}>© MySite</div>;
}
}
What I'd like to do now is change from CSS to the SASS format SCSS and basically do the same thing. I want to have my SASS file i.e. style.scss and instruct Webpack to create a style.scss.d.ts file at build time. Though I can't figure out how to do that.
Module rule in my webpack.config.js:
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{ test: /\.css$/, use: [
"style-loader",
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }}
] },
{ test: /\.(scss)$/, use : [
{
// Adds CSS to the DOM by injecting a `<style>` tag.
loader: "style-loader"
},
{
// Interprets `#import` and `url()` like `import/require()` and will resolve them.
loader: "css-loader"
},
{
// Loader for webpack to process CSS with PostCSS.
loader: "postcss-loader",
options: {
plugins: function () {
return [
require("autoprefixer")
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS.
loader: "sass-loader"
}
]
}
]
},
Dependencies in my package.json:
"dependencies": {
"#types/jquery": "^3.3.22",
"#types/react": "^16.4.18",
"#types/react-dom": "^16.0.9",
"bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"devDependencies": {
"autoprefixer": "^9.3.1",
"awesome-typescript-loader": "^5.2.1",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"typescript": "^3.1.6",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
What must I do to change from CSS modules to SASS Modules?

Answer 1

I found it out myself. So, I post it here in hope to help you guys if you have the same problem - +1 like if it did help ;).
I had to pay attention to a Bootstrap SCSS import, so I had to use Webpack's exclude and include functionality for differentiating between local and global CSS imports. Everything works fine now and these are my new module rules within my webpack.config.js file:
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }}
]
},
{
test: /\.scss$/,
exclude: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }},
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
},
{
test: /\.scss$/,
include: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
}

Answer 2

I can't find any flaw in your rules.Better try the following:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: IS_DEV
}
}
]
},
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `#import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins() {
return [
require('autoprefixer')
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
}
This works for me.