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
Post a Comment