無法解析 styleName

Question

我在我的 React 應用程序中使用 scss 模塊，但每次更改styleName ，都會收到錯誤消息：在熱重載期間Could not resolve styleName 。 如果styleName沒有任何相應的樣式，我也會收到錯誤消息。 我每次都必須重新啟動服務器才能重新編譯。 我的配置有問題嗎？

webpack.dev.js

const webpack = require('webpack')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = require('./webpack.base')({
    mode: 'development',
    devServer: {
        hot: true,
        port: 3000,
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new BrowserSyncPlugin(
            { proxy: 'http://localhost:3000/', open: false },
            { reload: false }
        )
    ],
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [
                            [
                                'react-css-modules',
                                {
                                    "filetypes": {
                                        ".scss": { "syntax": "postcss-scss" }
                                    },
                                    "generateScopedName": '[name]_[local]_[hash:base64:5]'
                                }
                            ],
                        ],
                    },
                },
                resolve: {
                        extensions: ['.js', '.jsx']
                }
            },
            {
                test: /\.(sa|sc)ss$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: false,
                            localIdentName: '[name]_[local]_[hash:base64:5]'
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
        ]
    }
})

例子.scss

.header-container {
  font-size: 14px;
}

.release-index {
  width: 5%;
}

Answer 1

您是否安裝了postcss-scss並放置了像這個插件選項這樣的配置？

['react-css-modules', {
        filetypes: {
           '.scss': {
              syntax: 'postcss-scss'
           }
         }
      }
]

Answer 2

您必須安裝postcss-import-sync2並將其作為第一個插件導入，如下所示（配置babel-plugin-react-css-modules ）。

也許較新的postcss-import也可以在這里工作，但它沒有同步模式，並且postcss-import-sync2也在README.md中使用

---

如果您想支持導入 sass 部分 _my-partial.scss 就像 @import './my-partial'; ，則需要自定義解析函數。

const path = require('path');

// Later configuring plugin...
{
  filetypes: {
    ".scss": {
      syntax: "postcss-scss",
      plugins: [
        [
          "postcss-import-sync2",
          {
            resolve: function(id, basedir, importOptions) {
              let nextId = id;

              if (id.substr(0, 2) === "./") {
                nextId = id.replace("./", "");
              }

              if (nextId[0] !== "_") {
                nextId = `_${nextId}`;
              }

              if (nextId.indexOf(".scss") === -1) {
                nextId = `${nextId}.scss`;
              }

              return path.resolve(basedir, nextId);
            }
          }
        ],
        [
          "postcss-nested",
          {
            bubble: ["@include"],
            preserveEmpty: true
          }
        ]
      ]
    }
  },
  generateScopedName: "[path]___[name]__[local]___[hash:base64:5]",
  webpackHotModuleReloading: true,
  exclude: "node_modules",
  handleMissingStyleName: "warn"
}

樣式.scss ：

@import './example';