Webpack - use CopyWebpackPlugin for scss files

Question

I want to convert some files from *.scss extension to *.css one and then copy them to the target folder .

These files aren't a part of a module so I can't import them by the *.scss loader (i.e import "myStyle.scss").

I know how to copy files by the CopyWebpackPlugin plugin -

plugins: [
    new CopyWebpackPlugin([    
        { from: 'source/myStyle.scss', to: 'myStyle.css' }
    ])
]

So now all I need is to add it a conversion from scss to css before to copying .

How could I achieve that ?

Filamentary

Answer 1

You can use transform option of CopyWebpackPlugin plugin in conjunction with sass. I.e. use the sass.compile function:

const sass = require('sass');

plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'style.scss',
        to: 'style.css',
        transform: (content, path) => {
          return sass.compile(path).css
        },
      }
    ],
  ),
]

Note that older answers may recommend using sass.renderSync(), but this is now deprecated.

Avent

Answer 2

You'll need sass-loader for that. For more info, check out https://github.com/webpack-contrib/sass-loader

Update: Try something like this.

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('myStyle.css')
  ]

Spooner

See my edit. There's no way around the rules section, unfortunately. – Spooner