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

  • Z时代
  • 2024-01-10
  • 分类：问答

我使用bootstrap css和用更少的文字编写的附加模板。我将两者都导入我的react组件的根组件中

不幸的是，即使较少的文件是第二个导入的文件，引导程序中的样式也会覆盖较少的样式。有没有办法确保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'
},

回答：

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

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

以上是 如何在Webpack中以正确的顺序导入样式 的全部内容， 来源链接： utcz.com/qa/418304.html

回到顶部