create-react-app默认是不支持stylus的,那么如何让create-react-app在不暴露的情况下支持stylus呢?

解决方案

  1. 安装 stylusstylus-loader
yarn add stylus stylus-loader
  1. 在根目录新建 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()
);
  1. 重启项目,项目中就可以使用stylus了!

参考

how to support stylus ? · Issue #203 · arackaf/customize-cra · GitHub.