Rax App 配置三方 CSS 预编译器

[SoloJiang]

Rax App 目前支持原生 CSS/ Less/ Sass 等样式方案，部分开发者存在使用 stylus 等框架没有内置的预编译器的诉求，这种场景我们推荐开发者自行开发 build-scipts 插件支持该能力。

Step 1

在项目根目录创建 plugin.js，内容如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = ({ onGetWebpackConfig }) => {
  [
    { isCSSModule: true, test: /\.module\.styl/ },
    { isCSSModule: false, test: /\.styl/ },
  ].forEach(({ isCSSModule, test }) => {
    const cssLoaderOptions = {};
    if (isCSSModule) {
      cssLoaderOptions.modules = {
        localIdentName: '[folder]--[local]--[hash:base64:7]',
      };
    }
    onGetWebpackConfig((config) => {
      config
        .module
        .rule('stylus')
        .test(test)
        .use('MiniCssExtractPlugin.loader')
        .loader(MiniCssExtractPlugin.loader)
        .options({
          esModule: false,
        })
        .end()
        .use('css-loader')
        .loader(require.resolve('css-loader'))
        .options(cssLoaderOptions)
        .end()
        .use('stylus-loader')
        .loader(require.resolve('stylus-loader'))
        .end()
        .use('postcss-loader')
        .loader(require.resolve('postcss-loader'))
        .options({
          plugins: [require('postcss-plugin-rpx2vw')()],
        })
        .end();
    });
  });
};

Step2

修改 build.json 内容

{
  "targets": ["web"],
  "plugins": [
+  "./plugin"
  ]
}

Notice

开发者自行安装的 stylus-loader/css-loader 等需要注意当前使用的 webpack 版本。