[Webpack] Add support of SCSS

README.md

@@ -7,5 +7,4 @@ A simple 11ty starter template with Nunjucks and Webpack.
 ## ToDo
 
 - Add support of `11ty-image` to generate images in next-gen formats
-- Add support of SASS/SCSS
 - Add blog part with navigation

package.json

@@ -29,6 +29,7 @@
     "autoprefixer": "^10.2.5",
     "css-loader": "^4.3.0",
     "css-minimizer-webpack-plugin": "^1.3.0",
+    "dart-sass": "^1.25.0",
     "eleventy-plugin-svg-contents": "^0.7.0",
     "file-loader": "^6.2.0",
     "glob": "^7.1.6",
@@ -40,6 +41,8 @@
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.2.0",
     "purgecss-webpack-plugin": "^4.0.3",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
     "webpack": "^5.31.2",
     "webpack-cli": "^4.6.0",
     "webpack-fix-style-only-entries": "^0.6.1"

webpack.config.js

@@ -12,16 +12,18 @@ const PATHS = {
 module.exports = (env, argv) => ({
   target: 'web',
   entry: {
-    styles: './src/_assets/css/main.css'
+    main: './src/_assets/js/main.js',
+    styles: './src/_assets/scss/main.scss'
   },
   output: {
     chunkLoading: false,
     wasmLoading: false,
-    path: path.resolve(__dirname, '_site')
+    path: path.resolve(__dirname, '_site/js'),
+    filename: '[name].js'
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: '/css/main.css'
+      filename: '../css/main.css'
     }),
     new FixStyleOnlyEntriesPlugin(),
     new PurgeCssPlugin({
@@ -32,10 +34,18 @@ module.exports = (env, argv) => ({
   module: {
     rules: [
       {
-        test: /\.css$/i,
-        include: path.resolve(__dirname, 'src/_assets/'),
-        exclude: /node_modules/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('dart-sass'),
+            },
+          },
+          'postcss-loader',
+        ],
       },
       {
         test: /\.(svg|jpg|gif|png)$/,