Question

根据react-datepicker文档，我尝试导入css文件，但是react引发错误为You may need an appropriate loader to handle this file type。我已经在css-loader文件中包含了webpack-config。缺少什么吗？以下是import文件的jsx部分

import React, { Component } from 'react';
import moment from 'moment';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

以下是webpack.config.js

const Notifier = require('webpack-build-notifier');
const path = require('path');

const plugins = [new Notifier({ title: 'Webpack' })];
const output = path.join(__dirname, 'public', 'javascripts');

const babelConfig = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      targets: {
        browsers: [
          'last 2 versions',
          'ie >= 11',
        ],
      },
    }],
    '@babel/react',
  ],
};

const cssConfig = [
    { loader: 'style-loader' },
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'postcss-loader' },
];

const sassConfig = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { importLoaders: 1 } },
  { loader: 'postcss-loader' },
  { loader: 'sass-loader' },
];

module.exports = {
  entry: { bundle: ['./src/client/router.jsx'] },
  output: { filename: '[name].js', path: output },
  devtool: 'source-map',
  resolve: { extensions: ['.js', '.jsx', '.json', '.css', '.scss'] },
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: cssConfig,
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: sassConfig,
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: babelConfig,
      },
    ],
  },
  plugins,
};

Answer 1

在我的情况下，使用react_rails时，我必须在scss中导入与我正在安装的主要React组件（app/assets/stylesheets/index.scss）相对应的文件。

@import "react-datepicker/dist/react-datepicker";

Answer 2

问题在于react-datepicker本身是一个包含css文件的节点模块。我通过手动复制并粘贴项目css文件夹中nodu_modules文件夹之外的Device.StartTimer(TimeSpan.FromSeconds(3), () => { // Do something return false; }文件（由于webpack配置不包括该文件）来使它起作用

Answer 3

<template>
  <div class="wrapper">
    <p>{{ items }}</p>
  </div>
</template>

<script>
  data() {
    return {
      items: [],
    }
  },
  async created() {   
    const snap = await this.ref_req.add(query);
    const key = await snap.id;
    let item
    await this.ref_res.doc(key).onSnapshot(async function(snap) {
      if (snap.data() == undefined ){
        return;
      }else{
        item = await snap.data()
        await snap.ref.delete()
        console.log(item)
        return {items : item }
      }
    })
  }
}

</script>

它应该工作

将react-datepicker css加载到jsx文件中的问题

3 个答案: