# Compile SASS with Webpack into a CSS file (ok)

> 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]',
        },
      },
    ],
  },
};
```

Ok

```
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 [September 28, 2017](https://florianbrinkmann.com/en/sass-webpack-4240/)

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, [the solution](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/159#issuecomment-292568527) was to use the [extract-loader](https://www.npmjs.com/package/extract-loader).

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 [Web development](https://florianbrinkmann.com/en/category/web-development/)

### Post navigation

[Previous:WordPress weekly recap #38: WordPress 4.8.2 and more](https://florianbrinkmann.com/en/wordpress-weekly-recap-wordpress-4-8-2-4237/)[Next:WordPress weekly recap #39: gallery widget and more](https://florianbrinkmann.com/en/wordpress-weekly-recap-gallery-widget-4244/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/advanced/compile-sass-with-webpack-into-a-css-file-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.