如何將css文件導入到組件.jsx文件中

我正在嘗試使用如下反應日採摘組件，但我無法弄清楚如何導入.css文件並且不斷收到錯誤：如何將css文件導入到組件.jsx文件中

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' 
     }] 
    } 
};

來源

2016-05-10 Q Liu

告訴我們您的WebPack配置。 – QoP

你是如何編譯這個的？如果是的WebPack，你可能需要在風格裝載機帶來的，包括像這樣的module.loaders陣列在你的WebPack配置：

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

更新：隨着webpack.config。現在提供了js，我們可以確認它需要在module.loaders陣列中進行更改。 OP是使用更少的裝載機，只檢查.less文件，因此確切的裝載機對象應改爲：

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

正如@Q Liu建議。離開原來的位置，就好像有人帶着導入.css文件的錯誤來到這裏一樣，這可能是他們需要的。

來源

2016-05-10 16:58:34

-6

JSX不是CSS。在您的主HTML文件中，只需將一個<link>元素添加到CSS文件中，React生成的DOM將使用它。

來源

2016-05-10 16:34:24

我曾經在我的WebPack配置以下和它的工作：

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

來源

2017-10-03 19:52:09 acaruci

如何將css文件導入到組件.jsx文件中

回答

相關問題