Next.js 引入多个style文件上的一些小问题

Next.js 是一个非常好用，并且极易上手的 React-Server-Side-Render Framework，而且支持了很多的一些玩法和操作，也可以去配置 router、redux、mobx、ts、flow、immutable、graphql、apollo 等、但是样式引用上却还是没办法有一种类似 vue 的方式。

目前大致有几种思路处理样式： css-in-js、webpack 打包 + css module 、自己写完用 gulp 或者 rollup 等打包工具来自行打包

目前我采用的是第二种方式，也是最接近 vue scoped css/less/sass/stylus 的方式。

这个是我的 next.config.js 里面的配置

const withPlugins = require('next-compose-plugins')
const withLess = require('@zeit/next-less')
const withCss = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
module.exports = withPlugins([
  [
    withLess,
    {
      cssModules: false,
      lessLoaderOptions: {
        javascriptEnabled: true
      }
    }
  ],
  [
    withCss,
    {
      cssModules: false
    }
  ],
  [
    withSass,
    {
      // cssModules: false
    }
  ]
])

上面的就是用到了一个 compose 的库来完成一个多个 plugins 同时使用的操作（和 koa 里面的 compose 还有 redux 里面的都是一个意思）

不写 css module 的原因是因为想去引一些第三方的组件，但是发现即时不采用 cssModule，如果我写成类似于 vue 那种一个.vue 文件去引入对应的一个 style 文件，然后一个 component 也对应引入一个 style，最终就除了问题（看 issue 目前应该是还不能这样写-_-）

不能的话，引入组件库，按需引入那种，本质上是没有问题的。可是我们想引入一下 antd 的个别几个组件时，发现它居然有全局样式，结果和我们的公共组件的样式覆盖了。。。算了还是自己写吧。

就只能将所有的样式文件（page 的和 component 的）全部引入到一个文件下，再放到_document.js 当中（建议放_app 当中，我看 issue 里作者说应该放_app.js）

然后就只能给自己定义一套样式的写法规范，按照 page 名称和 component 名称去命名 style，放在统一的 pages 和 components 文件夹下。

不知道什么时候写样式能够像 vue 那种，也不是 css module 那种，就类似于

1
2
3

<style jsx scoped>
  ` @import './style.less'; `
</style>

欢迎来探讨一下这个问题，可能是我想的还不够仔细，可能会有更好的办法，都欢迎大佬来评论。