NextJs-CSS ???

[yaofly2012]

策略

1. 内置支持css，styled-component；

CSS预处理器

1. scss文件得安装sass；
2. 其他的得显示引入插件

一、全局CSS

1.1 何为全局CSS

单独的css文件（项目里的或者node_modules里的）

1. 全局样式默认只支持css

• 开发的时候全局样式也是喷到style标签里，不是作为一个文件？
• 只能在_app.js组件里导入，否则报错：

[ error ] ./pages/index.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.js.
Read more: https://err.sh/next.js/css-global

Why ?
全局CSSclassName不变，为了避免冲突，故只准许在统一的位置引入全局样式。

1.2 处理方式：

二、CSS Modules(Component-Level CSS)

约定以‘.module.css’结尾的CSS文件。

2.1 特性

1. 自动生成唯一class名称（即具有local scope）；
   不用担心命名冲突（但是这样导致不能复用）。
2. Code Splitting ?
3. CSS 单独提取生成css文件

• 每个页面一个css文件？
• 开发时CSS喷到style标签里啊？【build时才会进行】
  

4. 不是声明非Pure选择器组件，即声明的选择器至少包含class or id。

CssSyntax error: Selector "h1" is not pure (pure selectors must contain at least one local class or id) (5:0)

因为CSS Modules会动态修改class/id，而标签，通配符*是特殊含义的，不能修改。

2.2 处理方式

2.3 全局样式和CSS Modules对比

解决不同的问题吧。

1. 全局样式

• 跨组件公共样式
• 引入第三方组件的样式（node_modules目录的样式）

2. CSS Modules

• 相对独立的CSS，有效命名冲突
• 生成更小的CSS文件size

Issues：

1. 编辑器如何自动联想补充className值?
2. CSS in js的解决的问题是什么？

三、CSS-in-JS

可以定义 isolated scoped CSS，范围比CSS Modules更小。本质上CSS Modules也是CSS-in-JS的解决方案，并且代码组织和使用比styled-jsx更方便些。

[yaofly2012]

PostCSS

内部使用PostCSS 编译CSS。