模块解析失败：意外的标记（7:5），您可能需要一个适当的加载器来处理此文件类型。

Question

---

我有一个错误代码。 我认为这个错误是由webpack.config.js引起的。 我查阅了许多资料，但没有得到结果。

    ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
    Module parse failed: Unexpected token (7:5)
    You may need an appropriate loader to handle this file type.
    |  */
    | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    | html {
    |   font-family: sans-serif;
    |   -webkit-text-size-adjust: 100%;
     @ ./index.js 21:0-43
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./index.js

---

我的webpack.config.js文件。我已经在这里做了一些安排，但是我又遇到了一个错误。我该如何解决这个错误？

         var webpack = require('webpack');
        var path = require('path');

        var parentDir = path.join(__dirname, '../');

        module.exports = {
            entry: [
                path.join(parentDir, 'index.js')
            ],
            module: {
                loaders: [{
                    test: /\.(js|jsx)$/,
                        exclude: /node_modules/,
                        loader: 'babel-loader'
                    },{
                        test: /\.less$/,
                        loaders: ["style-loader", "css-loder", "less-loader"]
                    }
                ]
            },
            output: {
                path: parentDir + '/dist',
                filename: 'bundle.js'
            },
            devServer: {
                contentBase: parentDir,
                historyApiFallback: true
            }
        }

---

像这样的 index.js 文件。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import AppRoutes from './routes';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(

<Provider store={store}>

 <AppRoutes />

 </Provider>,
 document.getElementById('app')
)

- Mehmet Resul Akyuz

Answer 1

看起来您需要为css-loader添加更多的配置。

目前，您对于less文件的配置如下：

{
  test: /\.less$/,
  loaders: ["style-loader", "css-loader", "less-loader"]
}

正如错误信息所提到的，除了less之外，您还需要为css文件配置一个加载器。请尝试以下操作：

{
  test: /\.less$/,
  loaders: ["style-loader", "css-loader", "less-loader"]
}, {
  test: /\.css$/,
  loaders: ["style-loader", "css-loader"]
}

- Derek Hopper