babel-plugin-import
babel-plugin-import copied to clipboard
Published
20 hours ago •
umijs
umijs
怎么控制css的打包顺序，自定义的样式不能覆盖and自带的样式
@zsg857981535 百度搜索就行: "css 优先级", 可以在body中加入你项目的作用域, 比如<body class="xxAPP">, 然后复写的样式用 .xxAPP{/*你自己定义的样式*/}, 上面的样式优先级是0,0,2,0, 提升的方法还有很多. 自己想吧
实例化两个ExtractTextPlugin,生成两个资源文件，一个是common，一个自定义的内容，调整先后顺序
例如： webpack.config.js
const commonExtractCss = new ExtractTextPlugin('common.css')
, projectExtractCss = new ExtractTextPlugin('app.css')
//...
rules: [
{
test: /\.less$/,
include: [path.resolve(__dirname, './src')],
use: projectExtractCss.extract([...])
},
{
test: /\.less$/,
exclude: [path.resolve(__dirname, './src')],
use: projectExtractCss.extract([...])
}
]
//...
plugins: [
commonExtractCss,
projectExtractCss,
...
]
html
<link rel="stylesheet" href="/dist/common.css">
<link rel="stylesheet" href="/dist/app.css">
在 js 中导入样式文件，比如：
// ComponentA.jsx
import React from 'react'
import ComponentB from '../component-b'
import './index.css'
webpack 打包之后，js 会动态在 header 中插入 script 标签，上述案例中，因为先 import ComponentB，如果 ComponentB 中也有 css 导入，那么 ComponentB 中的 css 会比 ComponentA 的 css 先加载。
注意问题，react 的入口文件中，如果有 css 导入，要注意先导入的组件的 css 会比入口文件中的 css 先导入。
同样的问题，我是使用babel-plugin-import按需加载了antd组件库的样式，然后在代码中又使用theme-ui自定义了某些antd组件的样式，然后就会出现这样的问题。
目前没有办法控制babel-plugin-import导入组件css和theme-ui生成css两者的顺序。
只能暂时通过类似下面这样的代码来提升css选择器权重。
<Input.Search
allowClear
sx={{
'&&': {
width: 200
}
}}
/>
正常来讲应该是这样写的，但是权重不够
<Input.Search
allowClear
sx={{
width: 200
}}
/>
