Webpack-使用CopyWebpackPlugin处理scss文件 [英] Webpack - use CopyWebpackPlugin for scss files

问题描述

我想将一些扩展名从 *.scss 的文件转换为 *.css 的文件，然后将其复制到目标文件夹.

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

这些文件不是模块的一部分，因此我无法通过 *.scss 加载程序导入(即 import"myStyle.scss" ).

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

我知道如何通过 CopyWebpackPlugin 插件

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

因此，现在我需要做的就是在复制之前将其从 scss 转换为 css .

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

我该如何实现?

推荐答案

您可以使用 transform 选项与 node-sass 结合使用.IE.使用 node-sass中的 sass.renderSync 函数:

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();
        },
      }
    ],
  ),
]

这篇关于Webpack-使用CopyWebpackPlugin处理scss文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！