详解使用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 相关文章推荐
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
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
php cc攻击代码与防范方法
2012/10/18 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
JS实现百度搜索框
2021/02/25 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
git进行版本控制心得详谈
2017/12/10 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
python 动态绘制爱心的示例
2020/09/27 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
临床护理求职信
2014/04/26 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
Django框架中模型的用法
2022/06/10 Python