Webpack 中 CSS / SASS 的加载器

Posted 2023-02-22

【中文标题】Webpack 中 CSS / SASS 的加载器

【英文标题】：Loader for CSS / SASS in Webpack

【发布时间】：2016-11-20 18:23:51

【问题描述】：

我选择了一个示例 webpack 配置文件，它具有以下加载程序。

   test: /\.scss|.css$/,

   loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')

它似乎可以工作，但我无法理解的是，很多地方都声明您必须使用 sass-loader 但我没有安装它，它也没有列在我的包文件中。

据我所知，它正在加载样式加载器，然后是 css 加载器。

这里发生了什么？我只在测试行（上图）上没有看到对 sass /scss 的引用。我还注意到它正在使用 ExtractTextPlugin 的提取功能，与仅使用有什么区别

  loader: ['style', 'css?sourceMap!postcss']

编辑

这些是我正在使用的 postcss 插件。

  require('postcss-import')(addDependencyTo: bundler),
        require('postcss-inline-comment')(),
        require('postcss-hexrgba'),
        require('postcss-size'),
        require('precss')(),
        require('css-mqpacker')(),
        require('autoprefixer')(
            browsers: ['last 2 version']
        )

【问题讨论】：

你使用的是哪些 postcss 插件？

嗨@bebraw，感谢您的及时回复。我已更新问题以包含我正在使用的插件。

我只是有点困惑，因为据我所知，我没有使用任何 sass 加载程序，但它可以工作！所以下一个问题是我应该使用 sass-loader 而不是让它神奇地工作吗？

我认为是precss插件。见github.com/jonathantneal/precss。

是的，看来是这样，您能添加一个答案，以便我将您标记为正确

【参考方案1】：

因为你启用了precss postcss 插件，所以它可以工作。它提供了 SASS 风格的标记。

【讨论】：

是的。是的，我决定删除它并使用真正的 sass-loader。谢谢