脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → create-react-app添加css modules

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

 更新时间：2018年07月31日 10:08:10   作者：林大元  
这篇文章主要介绍了详解使用create-react-app添加css modules、sasss和antd，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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"
   }
  ]
 ]
}

大功告成

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html

    react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html

    Grapes插件是一种用于Web开发的开源工具,可以帮助用户快速创建动态和交互式的网页元素,它还支持多语言和多浏览器,适合开发响应式网页和移动应用程序,这篇文章主要介绍了react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html,需要的朋友可以参考下
    2023-08-08
  • React重新渲染超详细讲解

    React重新渲染超详细讲解

    什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案
    2022-11-11
  • ES6下React组件的写法示例代码

    ES6下React组件的写法示例代码

    这篇文章主要给大家介绍了在ES6下React组件的写法，其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定，文中分别给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • React特征学习Form数据管理示例详解

    React特征学习Form数据管理示例详解

    这篇文章主要为大家介绍了React特征学习Form数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • react antd-design Select全选功能实例

    react antd-design Select全选功能实例

    这篇文章主要介绍了react antd-design Select全选功能实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React+Mobx基本使用、模块化操作

    React+Mobx基本使用、模块化操作

    React 和 MobX 是一对强力组合，React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染，而MobX提供机制来存储和更新应用状态供 React 使用，这篇文章主要介绍了React+Mobx基本使用、模块化,需要的朋友可以参考下
    2022-09-09
  • react中props 的使用及进行限制的方法

    react中props 的使用及进行限制的方法

    这篇文章主要介绍了react中的props 的使用及进行限制的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • React前端解链表数据结构示例详解

    React前端解链表数据结构示例详解

    这篇文章主要为大家介绍了React前端解链表数据结构示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • React使用redux基础操作详解

    React使用redux基础操作详解

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
    2023-01-01
  • 关于react中useCallback的用法

    关于react中useCallback的用法

    这篇文章主要介绍了关于react中useCallback的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论