如何在不是 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/