Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to import styles in the right order in webpack

Tags:

I use bootstrap css and an additional template written in less. Im import both in the root component of my react component. Unfortunately the styles from bootstrap overrule the less styles even if the less files are the second ones that are imported. Is there a way to ensure the order of the styles with webpack.

This is are the root component:

import React from "react";
import Dashboard from "./dashboard";
import 'bootstrap/dist/css/bootstrap.min.css'
import '../styles/less/pages.less'

React.render(
  <Dashboard />,
  document.body
);

this is there relevant part of the loader settings:

{
  test: /\.less$/,
  loader: ExtractTextPlugin.extract(
    'css?sourceMap!' +
    'less?sourceMap'
  )
}, {
  test: /\.css$/,
  loader: 'style-loader!css-loader'
},
like image 628
Andreas Köberle Avatar asked Jun 24 '15 13:06

Andreas Köberle


People also ask

How do I import CSS into webpack?

To be able to use CSS in your webpack app, you need to set up a new loader. Out-of-the-box, webpack only understands Javascript and JSON. With a loader, you can translate another type of file to a format that webpack understands and can work with. There are many webpack loaders and each loader has a specific purpose.

What is style-loader in webpack?

Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module. css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string.

How do I bundle CSS with webpack?

By default, Webpack will inline your CSS as Javascript tags that injects the CSS into the page. This sounds strange but it lets you do hot reloading in development. In production you extract them to a file using the ExtractTextPlugin, and require it with a normal link tag.

Why does webpack need loaders?

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node. js.


1 Answers

reorder your css import in index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-rtl/dist/css/bootstrap-rtl.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

note that index.css is loaded before bootstrap.css. they should be imported in following order:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-rtl/dist/css/bootstrap-rtl.css';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
like image 125
Ali Avatar answered Oct 20 '22 17:10

Ali