Webpack - use CopyWebpackPlugin for scss files

user_831294 0
Viewed 1519

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 ?

scss-lint webpack css javascript
2 Answers

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.

user_7186300
Related