V
V
Vadim Belkin2018-02-17 10:26:57
webpack
Vadim Belkin, 2018-02-17 10:26:57

How to collect less styles from vue components twice under different sets of less variables?

I have a project in vue. The component approach is used and the styles of each component are stored in the component itself (there is no separation into separate files for layout, scripts and styles, everything is in a .vue file) less. The assembly of component styles itself occurs at the stage of vue-loader operation inside the loader for less, where the styles are taken out to a separate file through ExtractTextWebpackPlugin. At the same stage, a file with variable styles is added via style-resources-loader

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              preserveWhitespace: false,
              loaders: {
                less: ExtractTextWebpackPlugin.extract({
                  fallback: 'style-loader',
                  use: [
                    'css-loader',
                    'less-loader',
                    {
                      loader: 'style-resources-loader',
                      options: {
                        patterns: [
                          path.resolve(__dirname, 'path/to/less/variables.less'),
                        ],
                      },
                    },
                  ],
                }),
              },
            },
          },
        ],
      },
    ],
  },

  ...

  plugins: [
    ...
    new ExtractTextWebpackPlugin({
      filename: 'styles/style.css',
    }),
  ],
};

There was a need to generate not one style file, but two for two different inline files with less style variables. Those. there are two files with style variables (same variables but with different values) and we need to generate two separate css files based on each set of variables.
I don't know how to do it. I figured it out for a long time, but I could not find a solution. As far as I understand, the processing and removal of styles of vue components occurs at the vue-loader stage inside the loader for less and it will not work to take it out from there. It also does not work there to use the ExtractTextWebpackPlugin twice, in order to extract the styles into separate files in each.
There was also an idea to duplicate that part of the assembly where the styles of the components are processed, but for this you need to completely duplicate the vue-loader and everything related to it, and this is almost 80-90% of the assembly, respectively, the assembly time will increase, and this cannot be done in my situation.
I have no more ideas, maybe someone has come across a similar problem and will suggest a solution.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question