Webpack@4.0.0:“模块解析失败.您可能需要一个合适的加载器来处理这种文件类型"- 虽然使用 css-loader 和 style-loader

问题描述

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

Below is my webpack.config.js and the 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: 边框框；|-webkit-box-sizing: 边框框；@ ./entry.js 20:0-42

./src/css/newUiStyles.css 模块中的错误解析失败:意外token (1:4) 你可能需要一个合适的加载器来处理这个文件类型.|身体{ |背景色:#F2F2F2；|字体系列:无衬线字体;@ ./entry.js 3:0-36 错误./src/css/custom-style.css 模块解析失败:意外令牌 (2:0)您可能需要一个合适的加载器来处理这种文件类型.|/*样式在这里*/|.border |{ |边框:1px 实心透明；@./entry.js 21:0-37

ERROR in ./src/css/newUiStyles.css Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type. | body{ | background-color: #F2F2F2; | font-family: sans-serif; @ ./entry.js 3:0-36 ERROR in ./src/css/custom-style.css Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type. | /* Styles go here */ | .border | { | border:1px solid transparent; @ ./entry.js 21:0-37

不知道是什么错误....

Not sure what error is....

预先感谢您的帮助

推荐答案

请查看您的正则表达式是否匹配.这是错误的.应该是:

Please look at your regex for matching. It is wrong.It should be:

/\.css$/ for css

/\.js$/ 用于 js

您的反斜杠位置错误.您的正则表达式匹配名为:style\css

Your backslash is at the wrong position.Your regex matches files named: style\css

这篇关于Webpack@4.0.0:“模块解析失败.您可能需要一个合适的加载器来处理这种文件类型"- 虽然使用 css-loader 和 style-loader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！