博客

这个配了超级久，一方面是CRA自定义webpack不太方便，另一方面是关于stylus的也太少了点，不是配置scss就是less，搜到几个stylus还是关于vue-cli的😭😭😭，上网查了好久才配置出来了，现在写出来吧，希望可以对其他人有帮助

网上cra配置stylus很多利用npm run eject都是暴露了webpack配置，我个人不太喜欢这种方式
这里采用的是customize-cra+react-app-rewired，安装啥的就不说了
1.安装
npm install stylus stylus-loader --save-dev
2.config-overrides.js配置

const { override, addWebpackAlias, fixBabelImports, addLessLoader, adjustStyleLoaders } = require('customize-cra');
const path = require('path')

const stylus = () => config => {
    const stylusLoader = {
        test: /\.styl$/,
        use: [
            {
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
            }, {
                loader: 'stylus-loader',
                options: {
                    stylusOptions: {
                        import: [
                            path.join(__dirname, "src/stylus/mixins.styl"),
                            path.join(__dirname, "src/stylus/variables.styl")
                        ],
                    }
                }
            }
        ]
    }
    const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf
    oneOf.unshift(stylusLoader)
    return config
}

module.exports = override(
    fixBabelImports('import', { // 按需导入antd
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                "@primary-color": "#ee96a9",
            },
        }
    }),
    adjustStyleLoaders(({ use: [, , postcss] }) => {
        const postcssOptions = postcss.options;
        postcss.options = { postcssOptions };
    }),
    //前面是自己的一些配置，下面这个stylus()是关键
    stylus()
);

引入stylus这个是在customize-cra的issues上找到，import全局文件是我自己看着stylus-loader文档写的，cv就完事了哈哈哈哈😁😁
这下子就可以随便用啦，over！！！