添加postcss-loader后显示“未知单词”错误

问题描述 投票:2回答:1

我想在我的webpack中添加postcss loader,但在添加postcss loader后显示Unknown word error。我还附上了错误截图。请查收附件。不确定是什么错误.... enter image description here

我还添加了postcss-loadersass-loadercss-loaderstyle-loader。如果我做错了什么,请告诉我们。

下面是我在config文件和package.json文件中的加载器。

  module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: ["babel-loader", "ts-loader", "tslint-loader"]

    },
    {
      test: /\.css$/,
      include: __dirname + "./src/css",
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1
          }
        },
        'postcss-loader',

      ]
    },
    {
      test: /\.scss$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            sourceMap: isDevMode
          }
        },
        {
          loader: "sass-loader",
          options: {
            sourceMap: isDevMode
          }
        }
      ]
    },

    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    },

    {
      loader: 'postcss-loader',
      options: {
        plugins: () => [require('autoprefixer')],
        loader: "postcss-loader",
      }
    },

    {
      test: /\.(ttf|eot|woff|woff2)$/,
      use: {
        loader: "file-loader",
        options: {
          name: "fonts/[name].[ext]",
        },
      },
    },
    {
      test: /\.(jpe?g|png|gif|svg|ico)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            outputPath: "assets/"
          }
        }
      ]
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
        'babel-loader'
      ]
    }

  ]
},

的package.json

"dependencies": {

    "cssnano": "4.0.5",
    "postcss-cssnext": "3.1.0",
    "postcss-import": "12.0.0",
    "prop-types": "15.6.0",
    "react": "15.6.2",
    "react-dom": "15.4.2",
    "react-redux": "4.4.9",
    "react-router": "3.0.2",
    "react-router-dom": "4.2.2",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-react-session": "2.2.0",
    "redux-thunk": "2.3.0",
    "sugarss": "2.0.0",
    "superagent": "3.8.1"
  },
  "devDependencies": {

    "autoprefixer": "^9.0.2",
    "babel-loader": "^7.1.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "3.15.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.1.0",
    "mini-css-extract-plugin": "0.4.2",
    "open": "0.0.5",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.20.3",
    "webpack": "4.17.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-dev-server": "3.1.5",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },
javascript reactjs webpack postcss-loader
1个回答
0
投票
{
  loader: 'postcss-loader',
  options: {
    plugins: () => [require('autoprefixer')],
    loader: "postcss-loader",
  }
},

声明没有test:,所以它总是被使用

© www.soinside.com 2019 - 2024. All rights reserved.