create-react-app
默认是不支持stylus
的,那么如何让create-react-app
在不暴露的情况下支持stylus
呢?
解决方案
- 安装
stylus
、stylus-loader
;
yarn add stylus stylus-loader
- 在根目录新建
config-overrides.js
文件,并写入如下代码:
const { override, fixBabelImports } = require('customize-cra');
const stylus = () => config => {
const stylusLoader = {
test: /\.styl$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'stylus-loader',
},
],
};
const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf;
oneOf.unshift(stylusLoader);
return config;
};
module.exports = override(
// 这里配置 antd 的按需加载
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
stylus()
);
- 重启项目,项目中就可以使用
stylus
了!
参考
how to support stylus ? · Issue #203 · arackaf/customize-cra · GitHub.