我具有EventInfoCard的以下配置。当它处于预加载状态时,它将呈现一个不同的组件,该组件从父级继承了许多CSS。我正在使用postcss-cssnext
变量,并且此compose函数似乎不能很好地与css-loader
一起使用。EventInfoCard.css
@import '../constants.css';
.root {
}
.thumbnail {
display: block;
width: 100%;
height: 0px;
padding-bottom: 56%;
position: relative;
overflow: hidden;
border-radius: var(--xxxs)px;
}
.notification {
border-radius: var(--xxxs)px;
font-size: 12px;
display: inline-block;
height: var(--s)px;
padding: 0 var(--xxs)px;
line-height: var(--s)px;
text-transform: uppercase;
font-weight: var(--weight-medium);
margin-right: var(--xxs)px;
}
.description {
letter-spacing: -0.1px;
margin-top: 7px;
}
EventInfoCardPreloading.css
@import '../constants.css';
.root {
background: blue;
}
.thumbnail {
composes: thumbnail from './InfoCard.css';
background-color: var(--tones-lightest);
}
.description {
composes: description from './InfoCard.css';
}
尽管现在它似乎是在引入EventInfoCard CSS而不是转换变量,但这最终以无效的CSS结尾,如下所示。那我在做什么错?我以为compos只会获取类名,而不会引入文件。
postcss配置:
const path = require('path')
module.exports = {
plugins: {
'postcss-partial-import': {},
'postcss-mixins': {
mixinsDir: path.join(__dirname, 'statics', 'mycujoo-theme', 'mixins')
},
'postcss-nested': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '> 5%'],
}
}
}
webpack加载器配置:
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } },
{ loader: 'postcss-loader' }
]
}),
最佳答案
由于您的配置使我们成为CSS Modules
和postcss-loader
,因此还应该声明一个importLoaders
选项以使postcss-loader
and css-loader
with CSS modules enabled work together。
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]' } },
{ loader: 'postcss-loader' }
]
}),
关于javascript - css-loader破坏了postcss-cssnext变量,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47262019/