首页 文章

Webpack@4.0.0：“模块解析失败 . 您可能需要一个合适的加载程序来处理此文件类型“ - 尽管使用css-loader和style-loader

提问于
浏览 次
0

下面是我的webpack.config.js和package.json

module.exports = {
  entry: "./entry.js",
  output: {
     filename: "./build/js/bundle.js"
  },
  module: {
    rules: [
      {
        test: /.\js$/,
        use: [
          {
            loader: 'babel-loader',
        options: {
          presets: ["es2015"]
        }
      }
    ]
  },
  {
    test: /.\css?$/,
    include: __dirname + "./src/css",
    exclude: __dirname + "./src/js",
    use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
  }
]
  },
  plugins: [
     // new UglifyJsPlugin()
  ]
}


"dependencies": {
    "ajv-keywords": "^3.1.0",
    "ajv": "^6.0.0",
    "axios": "^0.17.1",
    "babel-minify-webpack-plugin": "^0.3.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "install": "^0.10.4",
    "npm": "^5.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.10",
    "style-loader": "^0.20.2",
    "webpack": "^4.0.0"
  },

以下是错误

./src/css/autosuggest-style.css中的错误模块解析失败：意外的令牌（1：0）您可能需要适当的加载程序来处理此文件类型 . | .ngCustomInput ，：before，*：after {| -moz-box-sizing：border-box; | -webkit-box-sizing：border-box; @ ./entry.js 20：在./src/css/newUiStyles.css模块0-42 ERROR解析失败：意外标记（1：4），可能需要适当的装载程序来处理该文件类型 . |身体{| background-color：＃F2F2F2; | font-family：sans-serif; @ ./entry.js 3：0-36 ERROR在./src/css/custom-style.css模块解析失败：意外令牌（2：0），可能需要适当的装载程序来处理该文件类型 . | / 样式到这里 / | .border | {|边框：1px固体透明; @ ./entry.js 21：0-37

不确定是什么错误....

在此先感谢您的帮助

webpack webpack-style-loader css-loader

1 回答

  • 4

    请查看您的正则表达式以进行匹配 . 这是错误的 . 它应该是：

    /\.css$/ 为css

    /\.js$/ 为js

    你的反斜杠处于错误的位置 . 你的正则表达式匹配名为：style \ css的文件

    回复于

相关问题