Next.js: Integration: SASS together with PostCSS

20th August 2020 at 2:19pm
Next.js: Integration

我有一个场景,想把基于 SASS 的 Bulma 作为组件库,再引入基于 PostCSS 的 Tailwind CSS 作为 utilities。

注意:在折腾完这个方案的第二天后,我看到官方两天前发布了 Next.js 9.3,内嵌了 import SASS 文件的功能。因此我这下面的折腾部分白费了。

变化在于:

  • PostCSS 和 Tailwind CSS 仍然需要配置
  • 不再需要安装 @zeit/next-css@zeit/next-sass,不再需要编写 next.config.js
  • pages/_app.js 照旧

整个过程折腾了很久,各种报错,最后才尝试成功。

首先按 Tailwind CSS: Integrated with Next.js 写好 postcss.config.js 以及 styles/tailwind.css。然后需要安装这两个插件:

npm install --save-dev @zeit/next-css @zeit/next-sass

这里是奇怪点。如果你不用 SASS(不安装 @zeit/next-sass),那么你也不需要 @zeit/next-css 就可以正常用 Tailwind CSS。但是一旦你要用 SASS,你就必须这两个插件都安装。然后配置 next.config.js,将这两个插件的参数注入进来:

const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withSass({}))

这里亦可以使用 next-compose-plugins 来避免较迷惑的嵌套写法。

最终的效果是:

  1. pages/_app.js:
    // Note: 这里启用了 babel-plugin-module-resolver,因此不需要用相对路径
    import 'styles/style.sass'
    import 'styles/tailwind.css'
    
    // This default export is required in a new `pages/_app.js` file.
    export default function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />
    }
  2. styles/style.sass:
    @charset "utf-8"
    @import "~bulma"
  3. styles/tailwind.css:
    /* purgecss start ignore */
    @tailwind base;
    @tailwind components;
    /* purgecss end ignore */
    
    @tailwind utilities;

然后你可以在 JSX 正常使用 Bulma 及 Tailwind CSS 的 class。

Note
这个过程是在 Next.js 9.2.2 上完成的。不知道后续会不会产生变化。