详解使用create-react-app添加css modules、sasss和antd


Posted in Javascript onJuly 31, 2018

create-react-app 是facebook的官方脚手架,对于个人开发者和中小型公司快速创建项目非常推荐。react的CSS解决方案有很多,这里我技术选型时用 css modules 和 sass ,然后配合antd使用通用组件库。但是create-react-app原生并不支持 css modules 和 sass ,所以需要额外配置。

配置

增加css modules和sass

使用eject暴露配置

create-react-app 默认是没有暴露 webpack 配置的,所以需要eject一下。注意如果项目在git仓库环境下,先提交代码到git仓库,否则会报错

npm run eject

npm添加css modules和sass

npm install react-css-modules 
npm install sass-loader node-sass

这里安装sass可能会遇到墙的问题报错,所以要么使用cnpm或者使用本地代理设置,因为我有ss所以使用本地代理

// 开启代理
npm config set proxy http://127.0.0.1:1080
// 安装完sass后关闭代理
npm config delete proxy

webpack配置

重点来了,我们需要给 webpack 配置上 css-modules 和 sass-loader 。但是使用 css-modules 会使 node_modules 库里的css样式找不到,比如后面要使用到的antd,这个时候我们需要inclube来排除影响 node_modules ,使得 css-modules 不会影响到 node_modules

修改项目中 config 目录下的 webpack.config.dev.js 和 webpack.config.prod.js ,说明下这两个文件,前一个是开发环境 npm start 使用,后一个是 npm run build 打包后使用

修改 webpack.config.dev.js :

大约在160行左右,找到 test: /\.css$/ ,中文注释的地方就是修改和增加的地方

{
      test: [/\.css$/, /\.scss$/],// 这里增加SCSS的支持
      exclude: [/node_modules/],// 这里去排除node_modules,防止css modules影响到node_modules
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: {
         importLoaders: 1,
         modules: true, // 这里增加对css modules的支持
         localIdentName: '[name]__[local]__[hash:base64:5]' //这里增加对css modules的支持
        },
       },
       {
        loader: require.resolve('sass-loader'), // 这里增加sass的支持
       },
       {
        loader: require.resolve('postcss-loader'),
        options: {
         // Necessary for external CSS imports to work
         // https://github.com/facebookincubator/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
           browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
           ],
           flexbox: 'no-2009',
          }),
         ],
        },
       },
      ],
     },
     // 因为上面排除了css_modules所以这里一定要再添加个排除src来识别css_modules
     // 其实就是复制之前没修改前的所有,再增加一个exclude: [/src/]
     {
      test: /\.css$/, 
      exclude: [/src/], // 这里添加排除src,
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: {
         importLoaders: 1,
        },
       },
       {
        loader: require.resolve('postcss-loader'),
        options: {
         // Necessary for external CSS imports to work
         // https://github.com/facebookincubator/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
           browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
           ],
           flexbox: 'no-2009',
          }),
         ],
        },
       },
      ],
     }

修改 webpack.config.prod.js :

和上面修改 webpack.config.dev.js 类似

{
      test: [/\.css$/, /\.scss$/], // 这里增加SCSS的支持
      exclude: [/node_modules/], // 这里去排除node_modules
      loader: ExtractTextPlugin.extract(
       Object.assign(
        {
         fallback: {
          loader: require.resolve('style-loader'),
          options: {
           hmr: false,
          },
         },
         use: [
          {
           loader: require.resolve('css-loader'),
           options: {
            importLoaders: 1,
            minimize: true,
            sourceMap: true,
            modules: true, // 这里添加css modules支持
           },
          },
          {
           loader: require.resolve('postcss-loader'),
           options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
             require('postcss-flexbugs-fixes'),
             autoprefixer({
              browsers: [
               '>1%',
               'last 4 versions',
               'Firefox ESR',
               'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
             }),
            ],
           },
          },
          {
           loader: require.resolve('sass-loader'), // 这里添加sass支持
          }
         ],
        },

        extractTextPluginOptions
       )
      ),
      // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
     },
     {
      test: /\.css$/,
      exclude: [/src/], // 排除src
      loader: ExtractTextPlugin.extract(
       Object.assign(
        {
         fallback: {
          loader: require.resolve('style-loader'),
          options: {
           hmr: false,
          },
         },
         use: [
          {
           loader: require.resolve('css-loader'),
           options: {
            importLoaders: 1,
            minimize: true,
            sourceMap: true,
           },
          },
          {
           loader: require.resolve('postcss-loader'),
           options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
             require('postcss-flexbugs-fixes'),
             autoprefixer({
              browsers: [
               '>1%',
               'last 4 versions',
               'Firefox ESR',
               'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
             }),
            ],
           },
          }
         ],
        },

        extractTextPluginOptions
       )
      ),
      // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
     }

安装antd和配置

主要是安装配置 antd 和 babel-plugin-import ,这样可以使得 antd 按需加载样式

npm添加antd和babel-plugin-import

npm install antd
npm install babel-plugin-import

配置babel

在项目根目录下增加 .babelrc 文件,然后配置如下

{
 "presets": [
  "react-app"
 ],
 "plugins": [
  "transform-runtime",
  [
   "import",
   {
    "libraryName": "antd",
    "style": "css"
   }
  ]
 ]
}

大功告成

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JavaScript File分段上传
Mar 10 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
Vue导出页面为PDF格式的实现思路
Jul 31 #Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 #Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 #Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 #Javascript
vue导出html、word和pdf的实现代码
Jul 31 #Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 #Javascript
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
一个javascript参数的小问题
2008/03/02 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
Java的类与C++的类有什么不同
2014/01/18 面试题
2014年端午节活动方案
2014/03/11 职场文书
租房合同协议书
2014/04/09 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
家庭贫困证明
2014/09/23 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
英雄儿女观后感
2015/06/09 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android