react-datepicker组件中出现未知词错误

Question

我知道

npm install react-datepicker --save

https://reactdatepicker.com/

接下来，我将在项目中使用该组件

import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

在render函数中：

render(){
    return(
        <DatePicker />
    );
}

这个项目是用--webpack编译的：

webpack.config.js：

var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'order.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ["react", "es2015", "stage-0"]
        }
      },
      {
        test: /\.css$/,
        use: ['css-loader', 'style-loader']
      },
      {
        test: /\\.(gif|ttf|eot|svg|woff2?)$/,
        use: 'url-loader?name=[name].[ext]',
      },
    ]
  }
};

我得到以下错误：

ERROR in ./node_modules/react-datepicker/dist/react-datepicker.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!./react-datepicker.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

Answer 1

如果你改变了顺序呢？

{
    test: /\.css$/,
    include: /node_modules/,
    loaders: ['style-loader', 'css-loader'],
 }

加载程序总是从左到右执行。

并导入react-datepicker-cssmodules.css

import 'react-datepicker/dist/react-datepicker.css';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';