详解使用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获取网页中的js、css、Flash等文件
Dec 20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
浅谈js中对象的使用
Aug 11 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
分享给Python新手们的几道简单练习题
2017/09/21 Python
python自动识别文本编码格式代码
2019/12/26 Python
python怎么提高计算速度
2020/06/11 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
爱心捐助倡议书
2014/05/19 职场文书
大学生实训报告总结
2014/11/05 职场文书
导游欢送词
2015/01/31 职场文书
焦点访谈观后感
2015/06/11 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Mysql中存储引擎的区别及比较
2021/06/04 MySQL