<commit_before>## How to Use Sass/SCSS

**1**. Install [`sass-loader`](https://github.com/jtangelder/sass-loader) as a development dependency:

```sh
$ npm install sass-loader --save-dev
```

**2**. Update [`webpack.config.js`](../../webpack.config.js) file to use `sass-loader` for `.scss`
files:

```js
const config = {
  ...
  module: {
    loaders: [
      ...
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          `css-loader?${JSON.stringify({ sourceMap: isDebug, minimize: !isDebug })}`,
          'postcss-loader?pack=sass',
          'sass-loader',
        ],
      },
      ...
    ]
  }
  ...
}
```

**3**. Add one more configuration (pack) for [PostCSS](https://github.com/postcss/postcss) named
`sass` to enable [Autoprefixer](https://github.com/postcss/autoprefixer) for your `.scss` files:

```js
const config = {
  ...
  postcss(bundler) {
    return {
      default: [
        ...
      ],
      sass: [
        require('autoprefixer')(),
      ],
    };
  }
  ...
}
```

For more information visit https://github.com/jtangelder/sass-loader<commit_msg>Cosmetic fix in docs/recipes/how-to-use-sass.md<commit_after>## How to Use Sass/SCSS

> **Note**: Using plain CSS via [PostCSS](http://postcss.org/) is recommended approach because it
reduces the size of the tech stack used in the project, enforces you to learn vanilla CSS syntax
with modern CSS Level 3+ features that allow you doing everything you would normally do with
Sass/SCSS. Also compilation of plain `.css` files should work faster with `postcss` pre-processor
than `node-sass`.

**1**. Install [`node-sass`](https://github.com/sass/node-sass) and
[`sass-loader`](https://github.com/jtangelder/sass-loader) modules as dev dependencies:

```sh
$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev
```

**2**. Update [`webpack.config.js`](../../webpack.config.js) file to use `sass-loader` for `.scss`
files:

```js
const config = {
  ...
  module: {
    loaders: [
      ...
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          `css-loader?${JSON.stringify({ sourceMap: isDebug, minimize: !isDebug })}`,
          'postcss-loader?pack=sass',
          'sass-loader',
        ],
      },
      ...
    ]
  }
  ...
}
```

**3**. Add one more configuration (pack) for [PostCSS](https://github.com/postcss/postcss) named
`sass` to enable [Autoprefixer](https://github.com/postcss/autoprefixer) for your `.scss` files:

```js
const config = {
  ...
  postcss(bundler) {
    return {
      default: [
        ...
      ],
      sass: [
        require('autoprefixer')(),
      ],
    };
  }
  ...
}
```

For more information visit https://github.com/jtangelder/sass-loader and https://github.com/sass/node-sass
{'fraction_non_alphanumeric': 0.17863587152652471, 'fraction_numerical': 0.0025261638397690365, 'mean_word_length': 2.456359102244389, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '947951', 'n_tokens_mistral': 960, 'n_tokens_neox': 941, 'n_words': 216}