DEV Community

Sergey Todyshev
Sergey Todyshev

Posted on

How to add style loaders to webpack

In this post I am going to show how to configure webpack adding support for SASS and CSS files.
It is slightly inspired by this post,
but implemented as standalone module that you can easily to add your project.

Install dependencies

Step one.

Single line script for NPM:

npm install --save-dev autoprefixer css-loader mini-css-extract-plugin postcss-loader postcss-preset-env sass-loader source-map-loader style-loader

Single line script for Yarn:

yarn add --dev autoprefixer css-loader mini-css-extract-plugin postcss-loader postcss-preset-env sass-loader source-map-loader style-loader

Webpack Configuration

Step two. Copy below code to file and name it as webpack.sass.js;

const path = require("path");
const ExtractPlugin = require("mini-css-extract-plugin");

const NODE_ENV = process.env.NODE_ENV || "development";
const isDevelopment = NODE_ENV === "development";

const postcssLoader = {
  loader: "postcss-loader",
  options: {
    plugins: [require("autoprefixer")({}), require("postcss-preset-env")({})],
  },
};

const sassOptions = {
  outputStyle: "expanded",
  includePaths: [path.resolve(__dirname, "node_modules")],
};

const sassLoader = {
  loader: "sass-loader",
  options: { sassOptions },
};

const rules = [
  {
    test: /\.css$/,
    use: [
      "source-map-loader",
      isDevelopment ? "style-loader" : ExtractPlugin.loader,
      "css-loader",
      postcssLoader,
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "source-map-loader",
      isDevelopment ? "style-loader" : ExtractPlugin.loader,
      "css-loader",
      postcssLoader,
      sassLoader,
    ],
  },
];

module.exports = function withSass(config) {
  if (!config.module) {
    config.module = {};
  }
  if (!config.resolve) {
    config.resolve = {};
  }
  config.resolve.extensions = [...(config.resolve.extensions || []), ".scss"];
  config.module.rules = [...(config.module.rules || []), ...rules];
  config.plugins = [
    ...(config.plugins || []),
    new ExtractPlugin({
      filename: isDevelopment ? "[name].css" : "[name].[hash].css",
      chunkFilename: isDevelopment ? "[id].css" : "[id].[hash].css",
    }),
  ];
  return config;
};
Enter fullscreen mode Exit fullscreen mode

Step three. Modify webpack.config.js as following pattern:

const withSass = require("./webpack.sass.js");

// your base webpack config goes here
const baseConfig = {
    /// ...
};

// extend webpack config
const config = withSass(baseConfig);

module.exports = config;
Enter fullscreen mode Exit fullscreen mode

Enjoy! EOF 😄

Link to original post

Top comments (1)

Collapse
 
sergeyt profile image
Sergey Todyshev

Quick update. I've packaged this script into webpack-style-preset to reduce this workload a bit