AitSchool

CSS

css样式编写的方法

  • css in js (css名称)
  • 外部引用css，然后为组件定义对应的 className 属性。

css in js,是由 facebook 提出的在由 React开发的背景下。css in js，允许我们在变量当中定义样式，通过定义内联样式直接将每个组件的样式写在每个组件的js当中。通过利用js语言本身的特性，不必担心样式的作用域或者是复用性之类的问题。在传统的web开发认为应该尽量使用外联样式，与页面结构分离。但组件化的思想中，同一个组件应该在内部定义逻辑／结构／样式。分而治之，进近维护，独立文件，外部引用。

CSS 在 React 项目中的应用有：

Modules

create-react-app 已经把我们把所有配置都封装号，如果我们希望改变的话，就需要获取配置文件，在项目中

npm run eject

在目录下将生成 config 配置文件夹，webpack.config.dev.js 和 webpack.config.prod.js。

我们用命令行创建的 react 项目当中，默认已经包含了使用 CSS Modules 的所有依赖。

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules:true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  },
}

我们可以通过 import 来引入样式了，就可以在 className 对应的类名下使用了。

import styles from './App.css'

sass

如果像使用sass，就要添加对应的sass加载器。

npm install sass-loader node-sass --save-dev

需要我们修改配置才能生效

{
  test:/\.scss$/,
  include:paths.appSrc,
  loaders:[
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader'),
  ]
}

postcss

是一个加载css插件的平台，比起一些预先定制好的加载器，postcss更加的灵活。

yarn add autoprefixer postcss-initial postcss-import postcss-mixins postcss-nested postcss-simple-vars postcss-math postcss-color-function
  1. 在根目录中新建 postcss.config.js 配置
  2. 在 config 中新建 src 文件夹，配置 variables.js 和 mixins.js
  3. 修改 webpack.config 中引入 postcss.config.js 配置

postcss.config.js

module.exports = {
  plugins: {
    /* autoprefix for different browser vendors */
    'autoprefixer': {},
    /* reset inherited rules */
    'postcss-initial':{
      reset: 'inherited' // reset only inherited rules
    },
    /* enable css @imports like Sass/Less */
    'postcss-import': {},
    /* enable mixins like Sass/Less */
    'postcss-mixins':{
      mixins: require('./config/postcss/src/mixins')
    },
    /* enable nested css selectors like Sass/Less */
    'postcss-nested':{},
    /* require global variables */
    'postcss-simple-vars':{
      variables: function variables() {
        return require('./config/postcss/src/variables')
      },
      unknown: function unknown(node, name, result) {
        node.warn(result, 'Unknown variable ' + name)
      }
    },
    /* PostCSS plugin for making calculations with math.js  */
    'postcss-math':{},
    /* transform W3C CSS color function to more compatible CSS. */
    'postcss-color-function':{}
  }
}

/config/postcss/src/mixins.js

// src/mixins.js
var globalMixins = {
  /* noSelect is a static mixin  */
  noSelect: {
    '-webkit-touch-callout': 'none',
    '-webkit-user-select': 'none',
    '-khtml-user-select': 'none',
    '-moz-user-select': 'none',
    '-ms-user-select': 'none',
    'user-select': 'none'
  },
  /* OpenSans is a dynamic mixin  */
  OpenSans: function (obj, value) {
    return {
      'font-family': 'Open Sans, sans-serif',
      'font-style': 'normal',
      'font-size': value,
      'font-weight': 200,
      '-webkit-font-smoothing': 'antialiased',
      '-moz-osx-font-smoothing': 'grayscale'
    }
  }
}
module.exports = globalMixins

/config/postcss/src/variables.js

var globalVariable = {
  primary: 'blue'
}
module.exports = globalVariable

修改 webpack.config 配置，把默认配置注释或删除，让其使用更目录的 postcss.config.js 配置。

/config/webpack.config.dev

/config/webpack.config.prod

{
  loader: require.resolve('postcss-loader')
}

尝试在 CSS 中使用。

App.css

.App-intro{
  color:$primary;
  @mixin noSelect;
  @mixin OpenSans 30px;
}

打开浏览器查看你会发现：

.App-intro{
  color:blue;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: Open Sans, sans-serif;
  font-style: normal;
  font-size: 30px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

styled-components

文档：https://www.styled-components.com/docs/basics

← 实战TodoList →