如何在 webpack 中以正确的顺序导入样式

Posted 2023-02-22

【中文标题】如何在 webpack 中以正确的顺序导入样式

【英文标题】：How to import styles in the right order in webpack

【发布时间】：2015-09-10 18:36:01

【问题描述】：

我使用 bootstrap css 和一个用 less 编写的附加模板。我将两者都导入我的反应组件的根组件中。不幸的是，即使较少的文件是导入的第二个文件，引导程序中的样式也会覆盖较少的样式。有没有办法用 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
);

这是加载器设置的相关部分：

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

【参考方案1】：

在 index.js 文件中重新排序您的 css 导入：

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')
);

注意index.css 在bootstrap.css 之前加载。它们应按以下顺序导入：

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')
);

【参考方案2】：

问题是我必须使用 ExtractTextPlugin 插件也用于加载程序设置中的 css 部分：

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

  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    'css'
  )
,