Use different loaders for .scss and .less files

445 Views Asked by At

I am using Webpack 3 and CSS Modules. I have a different loaders for ".local.css" and "local.scss" files (local files) and another set of loaders for my global ".css or .less" files.

Now I have one more files type, a gloabl ".scss" file. I dont' want to make another set of loaders just for .scss file since the loaders are the same as the ones used for global ".css and .less" files.

There is just one difference, if file is ".less" I will use less loader and if its ".scss" then I will use sass loader.

{
        test: /\.local\.(css|scss)$/,
        use: ExtractLocal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]___[name]__[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: [ path.resolve(__dirname, './src/client/styling/styles/variables.scss'), ],
              },
            },
          ],
        }),
      },
      {
        test: /^((?!\.local).)+\.(css|less)$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'less-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        }),
      },

How do I do this? Can I somehow check a file type and use a appropriate loader, for example?

{
        test: /^((?!\.local).)+\.(css|less|scss)$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },

            if(test === '.less') {

              loader: 'less-loader',
              options: {
                sourceMap: true,
              },
             } else {
               loader: 'sass-loader',
               options: {
                sourceMap: true,
              },
             }

          ],
        }),
      },

I know my example doesn't make sense, just wanted to demonstrate what I am aiming at.

0

There are 0 best solutions below