Compile SASS with Webpack into a CSS file (ok)

https://florianbrinkmann.com/en/sass-webpack-4240/

Chú ý:
Đọc thêm đoạn sau để khác phục

Chỗ options

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
};

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path");
module.exports = {
  mode: 'development',
  entry: [
    './src/index.js',
    './src/image.scss'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: '[id].css',
    }),
    new HtmlWebpackPlugin({
      title: 'Wordpress 😋 ReactJs',
      template: 'src/index.html',
      filename: 'index.html'
    })
  ],
  module: {
    rules: [{
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: 'dist/',
            },
          },
          'css-loader'
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [{
            loader: 'file-loader',
            options: {
              name: 'style.css',
            },
            
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
};

{
  "name": "twentyseventeen",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^0.11.3",
    "postcss": "^8.1.1",
    "postcss-loader": "^4.0.3",
    "sass": "^1.26.11",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

Compile SASS with Webpack into a CSS file

Posted on

It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that.

Update from September 6, 2018: I updated the post to show a solution with Webpack 4.

I needed this because I had to use Webpack for a project and did not want to use another tool for compiling the SASS. At the end of my search, was to use the .

This is my webpack.config.json:

const path = require('path');

module.exports = {
	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
	entry: ['./blocks/index.js', './blocks/editor.scss', './blocks/frontend.scss'],
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'js/editor.blocks.js',
	},
	module: {
		rules: [
			{
				test: /\.scss$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'css/[name].blocks.css',
						}
					},
					{
						loader: 'extract-loader'
					},
					{
						loader: 'css-loader?-url'
					},
					{
						loader: 'postcss-loader'
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	}
};

With that, Webpack compiles the ./blocks/editor.scss to the editor.blocks.css inside the assets/css directory and the ./blocks/frontend.scss to the assets/css/frontend.blocks.css. The postcss-loader runs Autoprefixer. To get that working, I created a postcss.config.js with the following content:

module.exports = {
	plugins: {
		'autoprefixer': {}
	}
}

These are the dev dependencies from my package.json (a few are not necessary for the Webpack task) and the NPM tasks to run Webpack:

"scripts": {
  "build:dev": "webpack",
  "build:production": "cross-env NODE_ENV=production webpack",
  "watch": "webpack --watch"
},
"devDependencies": {
  "@babel/core": "^7.0.0",
  "@wordpress/babel-preset-default": "^2.1.0",
  "@babel/runtime-corejs2": "^7.0.0",
  "autoprefixer": "^9.1.3",
  "babel-loader": "^8.0.0",
  "cross-env": "^5.2.0",
  "css-loader": "^1.0.0",
  "extract-loader": "^2.0.1",
  "file-loader": "^2.0.0",
  "node-sass": "^4.9.3",
  "postcss-cli": "^6.0.0",
  "postcss-loader": "^3.0.0",
  "sass-loader": "^7.1.0",
  "webpack": "^4.17.2",
  "webpack-cli": "^3.1.0"
},

Now, if I run the webpack command, I get my SASS compiled into CSS.Posted in

Previous[WEBPACK] Webpack series (ep3) - code splitting - chia code trong webpack (ok)Next[WEBPACK] 11. Webpack : Optimize Khi Bundle template (ok)

Last updated 4 years ago

Was this helpful?

Chỗ options

Compile SASS with Webpack into a CSS file

Post navigation