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 ?

Answer 1

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')
  ]

Answer 2

You can use transform option of CopyWebpackPlugin plugin in conjunction with node-sass. I.e. use sass.renderSync function from node-sass:

const sass = require('node-sass');

plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'style.scss',
        to: 'style.css',
        transform (content, path) {
          const result = sass.renderSync({
            file: path
          });

          return result.css.toString();
        },
      }
    ],
  ),
]