webpack 中的antd样式无效_webpack antd-mobile样式失效 - CSDN
精华内容
参与话题
  • 用create-react-app 生成项目,引入antd 和 babel-plugin-import(按需加载组件)样式不生效,但是文件内部单独引入生效、解决办法webpack.config.dev 内的 loader选项,babel-loader的options字段下的plugins加入[ ...

    用create-react-app 生成项目,引入antd 和 babel-plugin-import(按需加载组件)样式不生效,


    但是文件内部单独引入生效


    解决办法

    webpack.config.dev 内的 loader选项,babel-loader的options字段下的plugins加入

     [ "import",{libraryName: "antd", style: 'css'}] // antd按需加载

    就可以解决问题了



    展开全文
  • react引入antd样式失效

    千次阅读 2019-11-03 21:50:53
    官网给出的按需加载解决方案,先必须安装 antd和babel-plugin-import ...因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 运行 npm run eject暴露webpack.config.dev和webpac...

    官网给出的按需加载解决方案,先必须安装 antd和 babel-plugin-import

    npm install antd --save
    
    npm install babel-plugin-import --save-dev

    因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下:

    运行 npm run eject暴露webpack.config.devwebpack.config.prod文件

    第一种方法:在package.json中配置,这种方法成功的前提是webpackquery下配置babelrc:true

    "babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
           ["import", {
             "libraryName": "antd",
             "libraryDirectory": "es",
             "style": "css"
           }]
         ]
      }

    第二种方法:在webpack.config.devwebpack.config.prod中配置:

    module: {
        strictExportPresence: true,
        rules: [
          {
            oneOf: [
              // Process JS with Babel.
              {
                test: /\.(js|jsx|mjs)$/,
                include: paths.appSrc,
                loader: require.resolve('babel-loader'),
                options: {
                    plugins: [
                        // 引入样式为 css
                        // style为true 则默认引入less
                        ['import', { libraryName: 'antd', style: 'css' }],
                    ]
                }
             }
          ]
        }
      ]
    }

     

    展开全文
  • antd按需引入样式无效

    千次阅读 2018-09-17 16:13:27
    ##最近在项目上antd时,发现了一个如果同时引入css modules和按需引入antd,antd样式无效的问题。 如果你的项目只是引入antd,那么根据官网步骤配置webpack应该是不会有问题的。 ###1. 首先在引入antd之前,我...

    ##最近在项目中上antd时,发现了一个如果同时引入css modules和按需引入antd,antd样式无效的问题。

    如果你的项目中只是引入antd,那么根据官网步骤配置webpack应该是不会有问题的。

    ###1. 首先在引入antd之前,我在webpack中已经配置了css modules(css modules怎么使用这里我就不多说了),现在我的webpack是这样的:
      ```
    module:{
            rules:[

                {//ES6、JSX处理
                    test:/(\.jsx|\.js)$/,
                    exclude: /node_modules/,
                    loader:'babel-loader',
                    query:
                        {
                            presets:["env", "react"],
                        },
                },

                {//CSS处理
                    test: /\.css$/,
                    loader: "style-loader!css-loader?modules",
                    exclude: /node_modules/,
                },
            ]
        }
    ```

    ###2. 根据antd design 官网按需引入antd
    - 首先安装 babel-plugin-import。
    npm
    `npm install babel-plugin-import --save  或 cnpm install babel-plugin-import --save`
    yarn
    `yarn add babel-plugin-import`

    - babel-loader的query/options字段加入
    ```
    plugins: [
        [  "import",{libraryName: "antd", style: 'css'}] // antd按需加载
    ]
    ```

    - webpack中plugins字段这样配置:
    ```
    module:{
            rules:[

                {//ES6、JSX处理
                    test:/(\.jsx|\.js)$/,
                    exclude: /node_modules/,
                    loader:'babel-loader',
                    query:
                        {
                            presets:["env", "react"],
                            plugins: [
                                [  "import",{libraryName: "antd", style: 'css'}] // antd按需加载
                            ]
                        },
                },

                {//CSS处理
                    test: /\.css$/,
                    loader: "style-loader!css-loader?modules",
                    exclude: /node_modules/,
                },
            ]
        }
    ```
    - 测试
    `import { Button } from 'antd'`
    使用Button测试antd的引入发现样式与官网Button的样式不一致。

    ###3. 解决办法
    - 如果你同时需要使用antd 和 css modules,处理样式时,需要分别处理。
    webpack加入以下处理:
    ```
                {//antd样式处理
                  test:/\.css$/,
                  exclude:/src/,
                  use:[
                      { loader: "style-loader",},
                      {
                          loader: "css-loader",
                          options:{
                              importLoaders:1
                          }
                      }
                  ]
                },
    ```

    - 最后webpack中是这样的:
    ```
    module:{
            rules:[

                {//ES6、JSX处理
                    test:/(\.jsx|\.js)$/,
                    exclude: /node_modules/,
                    loader:'babel-loader',
                    query:
                        {
                            presets:["env", "react"],
                            plugins: [
                                [
                                    "import",
                                    {libraryName: "antd", style: 'css'}
                                ] //antd按需加载
                            ]
                        },
                },

                {//CSS处理
                    test: /\.css$/,
                    loader: "style-loader!css-loader?modules",
                    exclude: /node_modules/,
                },

                {//antd样式处理
                  test:/\.css$/,
                  exclude:/src/,
                  use:[
                      { loader: "style-loader",},
                      {
                          loader: "css-loader",
                          options:{
                              importLoaders:1
                          }
                      }
                  ]
                },
            ]
        }
    ```

    好了,现在可以愉快是使用antd组件开设计的组件了。

    展开全文
  • 按需加载antd组件,样式失效问题

    千次阅读 2019-11-08 14:49:07
    按需加载antd组件功能如网上所说正常配置之后样式却没生效 解决办法如下: 原因也就是加载antd中的css样式时使用了css module ,导致antd css文件里面类名都变了。 ...

    按需加载antd组件功能如网上所说正常配置之后样式却没生效

    解决办法如下:

    原因也就是加载antd中的css样式时使用了css module ,导致antd css文件里面类名都变了。

    展开全文
  • babel-plugin-import不生效的问题

    万次阅读 2017-03-10 17:45:44
    使用create-react-app生成项目,然后eject,然后安装了antd和babel-plugin-import依赖包,按antd官网的说明在babelrc里面加了配置: { "plugins": [ ["import", { libraryName: "antd", style: "css" }] ] } ...
  • antd-mobile样式不生效 按需加载解决

    千次阅读 2019-08-02 18:53:08
    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "es","style": "css" }],//重点!网上大多漏了句"libraryDirectory": "es", "transform-runtime",// 这一句是我本地原有的...
  • 1. ant-design 引入样式的几种方式 1.1 全局引用 js代码引入 ant-design 的 Button 组件 import React, { Component } from 'react'; import Button from 'antd/lib/button'; import './App.css'; class App ...
  • 今天在配置antd按需加载的时候,遇到一问题,估计因为项目周期的原因,也就项目开始的时候配置一下,...通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用组件,看组件样式是否有效,如果生效则按需加...
  • 先安装 antd和babel-plugin-import npm i/install antd --save ...因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 运行 npm run eject暴露webpack.config.dev和webpack.config.prod文件...
  • 最近在项目上使用antd时,发现如果webpack里配置了extract-text-webpack-plugin插件,会造成antd样式无效的问题。
  • 最近笔者最近正在将老的项目迁移至typeseript,项目跑起来之后发现antd相关的样式全部丢失,发现webpack打包后css相关的代码没有被提取出来,导致antd样式全部无效化,原先的webpack配置文件: module: { rules: ...
  • 用create-react-app 创建一个项目后,由于要用到 Antd 想要按需加载,安装官网文档介绍,下载 babel-plugin-import 插件后 然后在项目根目录 添加 .babelrc 文件 // .babelrc { "plugins": [ ["import", { ...
  • 代码比较粗,抱歉抱歉,将就将就,css由于webpack那边未处理好(可能吧,我还不大了解webpack),直接写成行内样式了。 RadioGroup需要的值需要从后台返回,一开始用的defaultValue转载值,用this.state.aprtype来...
  • webpack版本:4.6.0 webpack.config.js加入以下处理:  找到babel-loader的query/options字段并加入: [ "import",{libraryName: "antd", style: 'css'}] // antd按需加载 例如: module: { rules:...
  • 在react使用antd 组件后页面没有样式。 问题原因: 因为组件的css 没有按需加载 在 webpack 配置文件,加入此行代码 重启后即可; 整体webpack配置如下: const path = require('path'); const webpack = ...
  • 网上有很多关于在react使用antd自定义主题的方法,但是几乎所有的都是告诉我们要在webpack配置文件引入文件或者是放自定义样式,没有人告诉我们如果有两个配置less-loader项时应该怎么区分,到底哪个是真的起...
  • 解决css文件 cnpm i style-loader css-loader -D { test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 39: …,'css-loader'] }̲ 解决less文件 cnpm…/, use: [‘style-loader’,‘css-loader’,...
  • React.js之Ant Design(Antd样式无效

    千次阅读 2019-11-04 08:39:52
    本文适用于适用react-create-app创建的react.js项目在使用Antd时,样式不生效的问题。
  • 引入antd.less文件报错的解决方法

    千次阅读 2019-11-17 17:04:38
    全局引入antd.less 文件报错 报错信息:./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-3-1!./node_modules/postcss-loader/src??ref--10-oneOf-3-2!./node...
1 2 3 4 5 6
收藏数 103
精华内容 41
关键字:

webpack 中的antd样式无效