Vue CLI - compile CSS files individually from directory of .scss files

Question

I am using Vue CLI which abstracts away much of the Webpack configuration for running and building the application. This comes with some benefits, but I am at a loss as to how to create specific rules for a directory of .scss files.

I would like these files to not be extracted into a single .css file on build, but to be individually compiled into a themes directory (./dist/themes).

I have tried to create a rule in vue.config.js to recognise the directory but it does not work:

module.exports = {
  runtimeCompiler: true,
  configureWebpack: config => {
    config.module.rules.push(
      {
        test: /\.md$/,
        use: 'raw-loader'
      },
      {
        test: /\.ya?ml$/,
        type: 'json', // Required by Webpack v4
        use: 'yaml-loader'
      }
    )
  },
  module: {
    rules: [
      {
        test: /\.scss$/i,
        loader: 'css-loader',
        options: {
          import: (url, media, resourcePath) => {

            // Find .scss files in src/assets/themes 
            if (url.includes('./src/assets/themes')) {
              
            }

          },
        },
      },
    ],
  },
}

Thanks

Sebastian Smolorz · Accepted Answer · 2020-10-28 19:52:58Z

1

I think your format in vue.config.js is incorrect. This is how you pass scss options to the loader:

    css: {
        loaderOptions: {
            scss: {
                   // options
            }
        }
    }

I'm not sure how you configure the output to be how you want it but this should help you. To see what vue.config.js is translated to in terms of webpack you can run vue inspect

answered Oct 28, 2020 at 19:52

Sebastian Smolorz

5071 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ogot Over a year ago

Thanks, I think I'll reformulate the question because I don't know how to do this with a standard Webpack configuration.

Collectives™ on Stack Overflow

Vue CLI - compile CSS files individually from directory of .scss files

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related