0

I am using css modules together with less preprocessor using webpack.

Each of my css modules starts with

@import (reference) '~lib.less';

to load global variables and mixins.

The (reference) import option prevents any code from lib.less to be actually included in the final css file, however the lib.less file is still parsed once for every module that has the import.

This is a problem because my lib.less is very large and takes around 500ms to parse. That means that for every 20 css modules my build takes 10s longer even if the css modules themselves are tiny.

Is there a way to make less/webpack to parse the lib.css file only once? Cache it or something?

This is my less loader webpack config just in case:

{
    test: /\.less$/,
    include: [SRC_DIR],
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: true,
                importLoaders: 2,
                localIdentName: '[name]_[local]_[hash:base64:5]',
            }
        },
        'postcss-loader',
        'less-loader'
    ]
}
Martin Kadlec
  • 4,702
  • 2
  • 20
  • 33
  • Just two remarks: 1. If your lib is really just about variables and mixins then `(reference)` is totally redudand there (the very purpose of the option is to import *CSS* files w/o rendering their contents into the result). 2. Make sure you understand the difference between parsing and compiling (the former is just a part of the latter). – seven-phases-max Jun 06 '18 at 09:48
  • As for the question itself I've never heard of any production-level tools/libs allowing you to cache Less imports. It's just not that trivial thing as it may appear at quick glance (there're some experimental works - [for example](https://github.com/less/less.js/issues/2640) - but I doubt there's something adopted for the webpack). – seven-phases-max Jun 06 '18 at 10:04
  • I renamed parsing to compiling. In truth, the library includes more than just variables and mixins so the (reference) is necessary. Thank you for the github link, it's nice to know I am not the only one stumbling upon this problem. – Martin Kadlec Jun 06 '18 at 13:49
  • *I renamed parsing to compiling.* That's was not necessary - more over if you'd read the topic I linked to, you'd know it's impossible (you *can* cache parsing but it's not necessary the thing taking the most of time, but you can't cache compiling simply because imported files are not compiled as independent units). – seven-phases-max Jun 06 '18 at 15:48
  • That's what happens when you first answer and read later :D – Martin Kadlec Jun 06 '18 at 17:35

0 Answers0