react 安装antDesign和sass_react下载sass

同时安装sass antDesign

cnpm i node-sass sass-loader antd --save

sasss不需要配置webpack 但是antd要配置按需加载

$ cnpm i  babel-plugin-import --save

配置webpack

把文件中的

改成.webpackrc.js

export default {
  extraBabelPlugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]
  ]
};

使用scss

1.把css后缀改成scss

index.scss

.layout {
    .header {
      height: 48px;
      background: #ffffff;
    }
    .content {
      padding: 15px 50px;
      background: #ffffff;
    }
  }

index.js引入

import styles from './index.scss';
 
function IndexPage() {
  return (
   <Layout className={styles.layout}>
     <Header className={styles.header}>header</Header>
       <Content className={styles.content}>main content</Content>
   </Layout>
  );
}