Как импортировать файл css в файл .jsx компонента

Question

Я пытаюсь использовать компонент action-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) 

Я "css-loader": "^0.19.0", в моем package.json установлен и вот мой 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

Как вы это компилируете? Если это WebPack, вы, вероятно, нужно принести в стиле погрузчиком и включают в себя что-то подобное в module.loaders массиве в вашем WebPack конфигурации:

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

---

Update: С webpack.config. js теперь, мы можем подтвердить, что ему необходимо изменить массив module.loaders. OP использовал меньше загрузчика и проверку только для .less файлов, поэтому точный объект загрузчика должен гласить:

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

Как было предложено @Q Liu. Оставляя исходный бит, как будто кто-то приходит сюда с ошибкой, импортирующей файл .css, скорее всего, что им нужно.

Answer 2

JSX не CSS. В основном HTML-файле просто добавьте элемент <link> в файл CSS, и DOM, созданный React, будет использовать его.

Answer 3

Я использовал следующие в моей WebPack конфигурации, и она работала:

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