コンポーネントファイルを.jsxファイルにインポートする方法

Question

私はreact-day-pickersコンポーネントを使用しようとしていますが、.cssファイルをインポートする方法を理解できず、エラーが発生し続けます。

Module parse failed: 

/Users/qliu/Documents/workspace/AppNexus/pricing_ui/contract-ui/app_contract-ui/node_modules/react-day-picker/lib/style.css Unexpected token (3:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (3:0) 

私はpackage.jsonで "css-loader": "^0.19.0",がインストールされている

と はここに私のCalender.jsxファイルです：

import React from "react"; 
import DayPicker, { DateUtils } from "react-day-picker"; 

import "../../../node_modules/react-day-picker/lib/style.css"; // <==== ERROR ON THIS LINE 

export default class Calender extends React.Component { 

    state = { 
    selectedDay: null 
    }; 

    handleDayClick(e, day, modifiers) { 
    if (modifiers.indexOf("disabled") > -1) { 
     console.log("User clicked a disabled day."); 
     return; 
    } 
    this.setState({ 
     selectedDay: day 
    }); 
    } 

    render() { 

    // Add the `selected` modifier to the cell of the clicked day 
    const modifiers = { 
     disabled: DateUtils.isPastDay, 
     selected: day => DateUtils.isSameDay(this.state.selectedDay, day) 
    }; 

    return <DayPicker enableOutsideDays modifiers={ modifiers } onDayClick={ this.handleDayClick.bind(this) } />; 
    } 
} 

、これが私のwebpack.config.jsです：

var path = require('path'); 
var webpack = require('webpack'); 
var settings = require('./src/server/config/settings'); 
var LessPluginAutoPrefix = require('less-plugin-autoprefix'); 

module.exports = { 
    devtool: '#source-map', 
    resolve: { 
     extensions: ['', '.jsx', '.js'] 
    }, 
    entry: [ 
     'webpack-hot-middleware/client', 
     './src/client/index.jsx' 
    ], 
    externals: { 
     'react': 'React', 
     'react-dom': 'ReactDOM', 

     // to avoid duplicate import of React with react-addons-css-transition-group 
     './React': 'React', 
     './ReactDOM': 'ReactDOM', 
     config: 'config' 
    }, 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin() 
    ], 
    lessLoader: { 
     lessPlugins: [ 
      new LessPluginAutoPrefix({ browsers: ['last 2 versions'] }) 
     ] 
    }, 
    module: { 
     loaders: [{ 
      test: /\.(js|jsx)$/, 
      loaders: ['babel'], 
      exclude: /node_modules/ 
     }, 
     { 
      test: /\.less$/, 
      loader: 'style!css!less' 
     }, 
     { 
      test: /\.json$/, 
      loader: 'json-loader' 
     }] 
    } 
}; 

Answer 1

どのようにこれを編集していますか？更新

{ 
    test: /\.css$/, 
    loader: "style!css" 
} 

---

：それはWebPACKのだ場合は、おそらくスタイルローダーに持参する必要がありますし、あなたのWebPACKの設定でmodule.loaders配列にこのようなものが含まれると思いますwebpack.configで。 jsが提供されたら、配列module.loadersの変更が必要であることを確認できます。 OPは少ないローダーを使用してのみ.lessファイルをチェックし、その正確なローダーオブジェクトが読んでくださいました。

{ 
    test: /\.(less|css)$/, 
    loader: 'style!css!less' 
} 

@Q Liuによって示唆されるように。 .cssファイルをインポートする際にエラーが発生した場合のように元のビットを残しておくと、必要なものになる可能性があります。

Answer 2

JSXはCSSではありません。メインのHTMLファイルでは、CSSファイルに<link>要素を追加するだけで、Reactによって生成されたDOMがそれを使用します。

Answer 3

私は私のWebPACKの設定に次のように使用し、それが働いた：

test: /\.css$/, 
 
     use: [ 
 
      'style-loader', 
 
      { 
 
      loader: 'css-loader', 
 
      options: { 
 
       modules: true, 
 
      }, 
 
      }, 
 
     ],