如何在不是 Next.js 的 React 中加载 scss？

Question

我们有一个在 Next.js 项目和 React 项目中都使用的组件。 组件有一个用 scss 制成的 css 模块。 在 Next.js 中使用它相当容易。

https://www.freecodecamp.org/news/how-to-use-sass-with-css-modules-in-next-js/

只需添加sass模块即可。 当我在基于 React 的 Wordpress 插件中使用它时，我遇到了以下错误：

ERROR in ./tikexModule/styles/buyTicket.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .section1 {
|   display: flex;
|   align-items: center;
 @ ./tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx 4:0-56 160:15-26

它无法处理scss 。 为什么？ 我将sass添加到两者中。

Answer 1

Webpack 需要配置加载指定扩展。

首先，您需要安装 sass 加载器和 sass webpack ：

npm install sass-loader sass webpack --save-dev

然后在你的webpack.config.js你需要配置它：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

Webpack 有很好的文档，看看： https://webpack.js.org/loaders/sass-loader/