How to mix sass and scss with webpack?

@arnoldo.moen 

To mix Sass and SCSS in a Webpack project, follow these steps:

1. Install the necessary dependencies:

1

npm install sass-loader sass webpack --save-dev

1. Configure Webpack to handle Sass/SCSS files by adding the following to your webpack.config.js file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

module: {
    rules: [
        {
            test: /.(sa|sc|c)ss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    ]
}

This configuration tells Webpack to use the Sass loader (sass-loader) to interpret Sass/SCSS files and converts them to CSS, then use the CSS loader (css-loader) to process the CSS, and finally injects it into the HTML using the style loader (style-loader).

1. Import Sass/SCSS files in your JavaScript files:

1

import './styles.scss'; // or styles.sass

1. Create a new .scss or .sass file and start writing your Sass/SCSS code.
2. Run your webpack build command:

1

webpack

Or if you have the webpack-cli installed globally:

1

webpack --config webpack.config.js

Webpack will now compile your Sass/SCSS files and bundle them into your final JavaScript file.

Note: Make sure you have the required loaders (style-loader, css-loader, sass-loader) installed and configured in your project's package.json file.