reactjs - Flowtype 在 React+Webpack 设置中给出 SCSS 文件错误

Question

我有一个 React/Webpack/Flowtype/Scss 设置，它似乎不能正常工作。

我收到以下错误：

Unexpected token `.`, expected the start of a statement

我的App.module.scss文件：

.App {
  text-align: center;
}

我的package.json开发人员：

  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-flow": "^7.12.1",
    "@babel/preset-react": "^7.7.4",
    "autoprefixer": "^9.7.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.3.2",
    "css-modules-flow-types-loader": "^1.4.1",
    "eslint-plugin-flowtype": "^5.2.0",
    "file-loader": "^5.0.2",
    "flow-bin": "^0.143.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^1.3.4",
    "node-sass": "^5.0.0",
    "postcss": "^8.1.0",
    "postcss-loader": "^4.0.2",
    "prettier": "^2.2.1",
    "prettier-webpack-plugin": "^1.2.0",
    "sass-loader": "^10.1.1",
    "style-loader": "^1.0.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

我的webpack.config.js设置如下：

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PrettierPlugin = require('prettier-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        oneOf: [
          {
            test: /\.module\.s?css$/,
            use: [
              { loader: 'style-loader' },
              { loader: 'css-modules-flow-types-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                  },
                  sourceMap: true,
                },
              },
              { loader: 'sass-loader' },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [['autoprefixer', {}]],
                  },
                },
              },
            ],
          },
          {
            use: [MiniCssExtractPlugin.loader, 'css-modules-flow-types-loader', 'css-loader', 'sass-loader'],
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=10000&name=img/[name].[ext]',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/src/index.html',
      filename: 'index.html',
      inject: 'body',
    }),

    new MiniCssExtractPlugin(),
    new PrettierPlugin({
      configFile: '.prettierrc',
    }),
  ],
};

我.flowconfig的如下：

[ignore]
.*/node_modules/*
.*/src/registeredServiceWorker\.js
.*/src/index\.js
.*\.test\.js
.*Tests\.js
.*webpack
\.flowconfig
.*/src/reportWebVitals\.js

[include]
./src/*

[libs]

[lints]

[options]
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
all=true

[strict]

我的.eslintrc：

{
  "extends": ["airbnb", "prettier", "prettier/flowtype", "prettier/react"],
  "plugins": ["flowtype", "react", "prettier"],
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", "jsx"]
      }
    ],
    "prettier/prettier": "error",
    "max-len": ["error", 80]
  },
  "env": {
    "browser": true
  },
  "settings": {
    "ignorePattern": "webpack.config.js",
    "import/resolver": {
      "webpack": {
        "config": "./config/webpack-common-config.js"
      }
    }
  }
}

我的.babelrc：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions",
            "last 2 iOS versions",
            "last 1 Android version",
            "last 1 ChromeAndroid version",
            "ie 11"
          ]
        }
      }
    ],
    "@babel/preset-react",
    "@babel/flow"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

如果有人能告诉我我做错了什么，那就太棒了。

我看过的东西：

这些教程：

https://medium.com/shopback-engineering/5-things-you-might-be-interested-in-your-flow-config-1ad35b023e93 https://github.com/skovhus/css-modules-flow-types

这个解决方案：

SCSS 模块给出流量错误

标签： reactjswebpacksassflowtype