Adding CSS into a ReactJS Project -


i'm using tutorial here base, haven't examples of how import css files app. i've found bits , pieces not enough know how it. i've added "import styles './styles/main.css';" app.jsx , webpack config below.

var css = require("css!./main.css");  var config = {     entry: './main.js',      output: {         path:'./',         filename: 'index.js',     },      devserver: {         inline: true,         port: 8080     },      module: {         loaders: [             {                 test: /\.jsx?$/,                 exclude: /node_modules/,                 loader: 'babel',                  query: {                     presets: ['es2015', 'react']                 }             },             {                 test: /\.css$/,                 loader: "style!css!"             }         ]     } }  module.exports = config;` 

i error:

./styles/main.css
module parse failed: c:\projects\reactapp\styles\main.css unexpected token (1:5)
may need appropriate loader handle file type.
syntaxerror: unexpected token (1:5)

that file has div {} right now.

in webpack config need add style-loader , css-loader (you need npm install first):

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

then can require css in .js files (components):

require('./styles/main.css'); 

Comments

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -