Trying get css file from scss file with webpack 4 - css

Question

I would like to setup my js and scss assets like this:
/src/_assets/js/app.js
/src/_assets/js/development.js
/src/_assets/scss/app.scss
And then I would like to end up with these bundled static assets:
/_site/js/app.js
/_site/js/development.js
/_site/css/app.css
I'm all the way on the js side, but I'm having a hard time getting my scss file to turn into css successfully. The CSS file does generate if I force mode: 'production', but the first 100 lines or so are replaced with a bunch of commented js code. And the whole CSS file is js code if I allow mode: 'development'.
What am I doing wrong?
package.json:
{
"devDependencies": {
"#11ty/eleventy": "^0.7.1",
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
}
}
webpack.config.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
name: devMode ? 'development' : 'production',
mode: devMode ? 'development' : 'production',
entry: {
// JS
'js/app.js': './src/_assets/js/app.js',
'js/development.js': './src/_assets/js/development.js',
// SCSS
'css/app.css': './src/_assets/scss/app.scss',
},
output: {
path: __dirname + '/src',
filename: '[name]',
},
module: {
rules: [
{
test: /\.js/,
loader: 'babel-loader',
include: __dirname + '/src/_assets/js'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
include: __dirname + '/src/_assets/scss'
}
],
},
plugins: [
new MiniCssExtractPlugin(
{
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "./[name]",
chunkFilename: "./[id].css"
}
)
],
};

Answer 1

I figured it out. Here are the changes I made:
webpack.config.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
name: process.env.NODE_ENV == 'production' ? 'production' : 'development',
mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
entry: {
'app': './src/_assets/js/app.js',
'development': './src/_assets/js/development.js',
},
output: {
path: __dirname + '/src',
filename: './js/[name].js',
},
module: {
rules: [
{
test: /\.js/,
loader: 'babel-loader',
include: __dirname + '/src/_assets/js'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
],
},
plugins: [
new MiniCssExtractPlugin(
{
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "./css/[name].css",
chunkFilename: "./css/[id].css"
}
)
],
};
/src/_assets/js/app.js:
import './../scss/app.scss';