CODEWITHSUNDEEP
javascripthtmlcsswebpacksass
ViktorasssIT
ViktorasssIT

Reputation: 387

How can you compile sass to css with webpack 4?

Can't figure out how to compile main.scss file to styles.css with webpack4. All javascript and scss are compiled to a single app.js file

  My package.json file:

enter image description here

webpack.config.js file:

webpack config file

webpack config file

 I want to compile my main file /src/styles/styles.scss to dist/styles.css

Upvotes: 1

Views: 1692

Answers (1)

Tumo Masire
Tumo Masire

Reputation: 432

You could try redefining the use property of the .scss rule.

{
test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ]
},

Then add this to your plugins:

plugins: [
    ...,
    new MiniCssExtractPlugin({filename: '[name].css',})
]

That should compile it all into the dist/ folder, as a separate .scss file. Edit: as a separate .css file.*

Upvotes: 3

Related Questions