如何在Webpack中以正确的顺序导入样式 [英] How to import styles in the right order in webpack

问题描述

我使用bootstrap css和用更少的文字编写的其他模板.我将两个都导入我的react组件的根组件中.不幸的是，即使较少的文件是第二个导入的文件，引导程序中的样式也会覆盖较少的样式.有没有一种方法可以确保使用webpack样式的顺序.

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.

这是根组件:

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'
},

推荐答案

问题是我还必须在我的加载器设置中的CSS部分也使用ExtractTextPlugin插件:

The problem is that I have to use the ExtractTextPlugin plugin also for the css part in my loader settings:

{
  test: /\.less$/,
  loader: ExtractTextPlugin.extract(
    'css?sourceMap!' +
    'less?sourceMap'
  )
}, 
{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    'css'
  )
},

这篇关于如何在Webpack中以正确的顺序导入样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！