'Process SCSS with Webpack 5

I want to use webpack 5 to process scss and put the processed css file into /dist/css/styles.css

For that, I am using the following entry/output setup:

entry: {

    // Javascript bundles
    globals: './src/js/globals.js',
    alpine: './src/js/alpine.js',

    // CSS (output into a separate folder)
    style: {
        import: './src/scss/styles.js',
        filename: '../css/styles.css'
    },

},

JS bundles get processed fine, but I'm having trouble with the styles.

My styles.js file contains:

import "./styles.scss";

And there is a styles.scss file in the same folder.

Then, for the rules, I'm using:

rules: [
    {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
    },
],

But I'm not getting the CSS styles as a clean CSS file.

Instead, it contains the following:

/******/ (() => { // webpackBootstrap
/******/    "use strict";
/******/    var __webpack_modules__ = ({

/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass- 
...

What am I doing wrong?

csswebpack


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions