在react中使用stylus-loader

2018-04-03

`stylus-loader`可以让`react`直接引入`.styl`文件，无需自己进行编译。

参考：https://www.jianshu.com/p/9cd7a0dff11f

我使用create-react-app构建工程，默认隐藏所有配置。要使用stylus-loader，我们要对配置进行修改。步骤如下：

在工程根目录下执行npm run eject，会多出几个文件夹，我们需要的是config文件夹。
安装stylus相关依赖，执行npm i stylus stylus-loader --save-dev或yarn add stylus stylus-loader

打开config\webpack.config.dev.js，在module.export -> module -> oneOf中添加以下代码

{
    test: /\.styl$/,
    use: [
        require.resolve('style-loader'),
        require.resolve('css-loader'),
        require.resolve('stylus-loader')
    ]
},

打开config\webpack.config.prod.js，在module.export -> module -> oneOf中添加以下代码

!原文引用
(这是我参考下面的针对的css配置，需要更进一步测试)这是因为prod环境下，所有的css都被ExtractTextPlugin插件提取到同一个样式文件中，开发环境则是动态的创建style标签并插入到html的header中。

{
    test: /\.styl$/,
    loader: ExtractTextPlugin.extract(
        Object.assign(
            {
                fallback: require.resolve('style-loader'),
                use: [
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            importLoaders: 1,
                            minimize: true,
                            sourceMap: shouldUseSourceMap,
                        },
                    },
                    {
                        loader: require.resolve('stylus-loader'),
                    }
                ],
            },
            extractTextPluginOptions
        )
    ),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

这样就可以在react中直接引入.styl文件了。开发过程中没有问题，生产环境暂时没问题，还需测试。