reactjs - 汇总插件 postcss 不注入从 node_modules 导入的 css
问题描述
这是我的汇总配置
// rollup.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
module.exports = {
rollup(config, _options) {
config.plugins.push(
postcss({
plugins: [
autoprefixer(),
],
extensions: ['.css'],
modules: false,
extract: false,
}),
);
return config;
},
};
因此,如果我从相对路径本地导入 css 文件,它会被注入,但我从 node_modules 导入它不会
import React from 'react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// The following works if I copy the file locally
// import './ReactToastify.css';
我在这里做错了什么?
解决方案
我遇到了完全相同的问题,我想我找到了解决方案。这里的诀窍是使用rollup-plugin-postcss
(或也rollup-plugin-styles
)与@rollup/plugin-node-resolve
.
我rollup.config.js
看起来像这样:
import { nodeResolve } from '@rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
// import styles from 'rollup-plugin-styles'
export default {
...
plugins: [
postcss(),
// styles(),
nodeResolve({
extensions: ['.css']
})
]
};
据我所知,对于我的简单案例,使用 postcss 或样式插件并不重要。两者的工作方式相同。
推荐阅读
- python - 使用 cftime 日期在 xarray 线图中设置 xticks
- android - 以 android (HaxeDevelop) 为目标时如何解决此构建错误?
- javascript - 如何调整画布的大小?
- java - 如何将 foreach 变成 lambda?
- c# - how to rollback all SqlCommands which already executed with SqlTransaction?
- azure - 使用复制对象创建多个 Azure VM
- javascript - 如何在 JavaScript/TypeScript 中将字符串转换为 Long(不长)
- linux - 更改 IP 后 RIAK 节点不启动
- javascript - 如何检查此 dropzone.js 引导示例中是否已添加文件?
- python - 从破折号分隔的字符串创建多级字典(不知道有多深)