Can't get webpack to output bundled css? - css

Question

i'm new to webpack and following a course. But one thing they don't really talk about is how to compile different sass to css.
I've given it a try here, but am getting an error. I'm trying to get it to output to styles.css for use with wordpress
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
home: [
settings.themeLocation + "js/scripts.js"
],
style: [
settings.themeLocation +'styles/main.sass'
]
App: settings.themeLocation + "js/scripts.js"
},
output: {
home: [
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
]
style:[
path: path.resolve(__dirname, settings.themeLocation + "styles"),
filename: "styles-bundled.css"
]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{ test: /\.css$/, use: 'css-loader' }
{ test: /\.sass$/, use: 'sass-loader' }
]
},
mode: 'development'
}

Answer 1

Here is a snippet from my webpack config
You need to install style-loader, css-loader and sass-loader
The following snippet is for development part
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
For production
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 2,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 3,
},
},
'sass-loader',
],
},
& add the folling to plugin section
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
Note that the above snippets may not work directly for you, Its is just to give you idea how webpack can handle css $ scss