Load CSS from different folder in react

Question

I am working on a react project and here is my folder structure: I want to load my example.css which is in different folder inside index.js

templates
  --src
    --index.js
    --index.html

static
  --css
      --example.css
  --images
  --etc

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

config = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/index.js",
  output: {
    path: "../../static/webpack_build",
    filename: "bundle.js"
  },
  plugins: [
    new webpack.DefinePlugin({ // <-- key to reducing React's size
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin(), //minify everything
    new webpack.optimize.AggressiveMergingPlugin()//Merge chunks
  ],
  module: {
         loaders: [{
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 query:
                      {
                        presets:['es2015', 'react']
                      }
             },
             {
                 test: /\.css$/,
                 loader: 'style-loader!css-loader'
             }
             ]
         },
  };

module.exports = config;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from '../../static/css/affman.css'


ReactDOM.render(
    <h1>Offer wall new version coming soon!</h1>,
  document.getElementById('root')
);

When I try to bundle this using webpack it gives module not found error.

ERROR in ./src/index.js
Module not found: Error: Can't resolve '../../static/css/affman.css' in '/home/kishan/mobifly/mobifly_mediation_engine/templates/frontend_mobifly/src'
 @ ./src/index.js 11:14-50

Youer error says ././ your code says ../../ are is it hitting the right folder? — FabioCosta
– FabioCosta, Commented Mar 16, 2017 at 13:15

Vitalii Andrusishyn · Accepted Answer · 2017-03-16 13:19:03Z

3

Try to use this link to the style:

import styles from '../css/affman.css'
enter code here

I think issue related with your output folder webpack_build from the webpack. And maybe we should set link to css from this folder

  output: {
    path: "../../static/webpack_build",
    filename: "bundle.js"
  }

I hope it will be helpful

answered Mar 16, 2017 at 13:19

Vitalii Andrusishyn

4,2121 gold badge28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load CSS from different folder in react

webpack.config.js

index.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

webpack.config.js

index.js

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related