鍍金池/ 問(wèn)答/HTML/ 用ant design為啥樣式?jīng)]有顯示出來(lái)

用ant design為啥樣式?jīng)]有顯示出來(lái)

import { Button } from 'antd';
import ReactDOM from 'react-dom';
import React from 'react';
import 'antd/dist/antd.css';

ReactDOM.render(
    <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
    </div>,
    document.getElementById('app'));

webpack.config.js

path = require('path');
HtmlPackagePlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist/js')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1
                        },
                    },
                    {loader: 'postcss-loader'}
                ]
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.tpl$/,
                use: 'ejs-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/i,
                use: 'file-loader'
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader", options: {
                        strictMath: true,
                        noIeCompat: true
                    }
                }]
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlPackagePlugin({
            filename: 'index.html',
            template: './src/index.html',
            inject: 'body',
        })
    ]
};

為什么顯示不出來(lái)

clipboard.png

回答
編輯回答
初念

...好吧,下面的東西確實(shí)不能解決問(wèn)題,很抱歉答的太隨意,原因應(yīng)該是css-loaderoptions中配置了module: true的問(wèn)題,這樣會(huì)開(kāi)啟css-module,會(huì)默認(rèn)對(duì)所有的類(lèi)名與動(dòng)畫(huà)名啟用局部作用域css。測(cè)試的方法是引入自己寫(xiě)的css文件,其中類(lèi)選擇器的樣式不會(huì)生效,通過(guò)其他選擇器聲明的可以生效。詳細(xì)參考下面的鏈接:
https://webpack.js.org/loader...
https://github.com/css-module...
--------------------我是分割線-------------------------
新建一個(gè)css文件,然后在你的js中引入你新建的css,在你新建的css中加入下面的代碼。。。但是我不確定對(duì)你有沒(méi)有用。
@import '~antd/dist/antd.css';
圖片描述

2018年5月18日 10:33
編輯回答
萌吟

有人嗎?。。。

2017年7月30日 14:51
編輯回答
久舊酒

需要在jsx的loader, options中添加這樣的

{
   test: /\.(js|jsx)$/,
   include: paths.appSrc,
   loader: require.resolve('babel-loader'),
   options: {
   plugins: [
       ['import', { libraryName: 'antd', style: true }],
     ],
  },
},

這樣才能按需加載

2018年4月8日 18:28