Skip to content

样式无法显示 #3442

New issue
New issue
Closed
Closed
样式无法显示#3442
@cike8899

Description

@cike8899
cike8899
opened on Oct 15, 2016 · edited by cike8899

.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

然后引入组件

import {
    Table,
    Icon,
    Input,
    Dropdown,
    Menu,
    Button
} from 'antd';

可是样式就是出不来，之前还好好的！

Activity

afc163

afc163 commented on Oct 16, 2016

@afc163
afc163
on Oct 16, 2016
Member

umijs/babel-plugin-import#58

umijs/babel-plugin-import#61

看看是不是这些问题，或者给出更多信息。

cike8899

cike8899 commented on Oct 16, 2016

@cike8899
cike8899
on Oct 16, 2016
Author

{ test: /.css$/, exclude: path.resolve(__dirname, './node_modules'), loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[local]' + '_hash:base64:6!postcss-loader' }, { test: /.css$/, include: path.resolve(__dirname, './node_modules'), loader: 'style-loader!css-loader!postcss-loader' },

webpack的css配置如上，less配置和css配置一样的，发现antd的classname被加上了后缀

afc163

afc163 commented on Oct 16, 2016

@afc163
afc163
on Oct 16, 2016
Member

看这个回复：umijs/babel-plugin-import#58 (comment)

afc163
closed this as completedon Oct 16, 2016
cike8899

cike8899 commented on Oct 16, 2016

@cike8899
cike8899
on Oct 16, 2016
Author

cssLoaderWithoutModule lessLoader 这两个变量怎么配置？

afc163

afc163 commented on Oct 16, 2016

@afc163
afc163
on Oct 16, 2016 · edited by afc163
Member

简单的说，你配置了 css-modules 的相关功能，它把 antd 的样式也 hash 化了，导致样式不匹配。

建议你把 node_modules 下的文件都 exclude 掉，不要让它走 css-modules。

http://stackoverflow.com/questions/35398733/css-modules-how-do-i-disable-local-scope-for-a-file

css-modules/css-modules#65

cike8899

cike8899 commented on Oct 16, 2016

@cike8899
cike8899
on Oct 16, 2016
Author

明明将node_modules exclude掉了：

 {
        test: /\.less$/,
        exclude: path.resolve(__dirname, './node_modules'),
        loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[local]' +
            '__[hash:base64:6]!postcss-loader!less-loader'
      }, {
        test: /\.css$/,
        exclude: path.resolve(__dirname, './node_modules'),
        loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[local]' +
            '__[hash:base64:6]!postcss-loader'
      }, {
        test: /\.less$/,
        include: path.resolve(__dirname, './node_modules'),
        loader: 'style-loader!css-loader?modules=false!postcss-loader!less-loader'
      }, {
        test: /\.css$/,
        include: path.resolve(__dirname, './node_modules'),
        loader: 'style-loader!css-loader?modules=false!postcss-loader'
      }
inkinworld

inkinworld commented on Feb 11, 2017

@inkinworld
inkinworld
on Feb 11, 2017

让antd的less不通过css-module-loader就行了
只让自己的less文件通过css-module-loader

      {
        test: /\.(less)$/,
        loader: ExtractTextPlugin.extract('style?sourceMap', 'css?sourceMap!less?sourceMap!!less?sourceMap'),
        include: /node_modules/
      },
      {
        test: /\.(less)$/,
        loader: ExtractTextPlugin.extract('style?sourceMap', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!less?sourceMap'),
        exclude: /node_modules/
      },
ghost mentioned this on Sep 29, 2017
JX-Zhuang

JX-Zhuang commented on Mar 21, 2018

@JX-Zhuang
JX-Zhuang
on Mar 21, 2018
Contributor
babel:['import', [{libraryName: "antd-mobile", style: true}]],
{
 test: /\.less$/,
 use: [
    require.resolve('style-loader'),
     {
       loader: require.resolve('css-loader')
   },
    {
      loader: require.resolve('less-loader')
      }
  ],
 }

It can run. :)

JX-Zhuang
mentioned this on Mar 21, 2018
JX-Zhuang

JX-Zhuang commented on Mar 21, 2018

@JX-Zhuang
JX-Zhuang
on Mar 21, 2018
Contributor

You can see
#3442 (comment)

JX-Zhuang
mentioned this on Mar 21, 2018
varrant

varrant commented on Nov 16, 2018

@varrant
varrant
on Nov 16, 2018 · edited by varrant

最新webpack4配置，关键是include和exclude，亲测可行，希望能帮到大家。

{
        test: /\.(css|less)$/,
        include: /node_modules/,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader', // translates CSS into CommonJS
        }, {
          loader: 'less-loader', // compiles Less to CSS
          options: { javascriptEnabled: true, sourceMap: true },
        }],
      },
      {
        test: /\.(css|less)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader', // translates CSS into CommonJS
          options: {
            modules: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
          }
        }],
      }
ghost

ghost commented on Dec 13, 2018

@ghost
ghost
on Dec 13, 2018

use typescript

{
            test: /\.css$/,
            include: /node_modules/,
            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',
                    }),
                  ],
                },
              },
            ],
          },
          {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('typings-for-css-modules-loader'),
                options: {
                  modules: true,
                  namedExport: true,
                  camelCase: 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',
                    }),
                  ],
                },
              },
            ],
          },
huayezhiwu

huayezhiwu commented on May 16, 2019

@huayezhiwu
huayezhiwu
on May 16, 2019
        include: /node_modules/,

谢谢提供，亲测可行~~

noobalex

noobalex commented on Dec 15, 2019

@noobalex
noobalex
on Dec 15, 2019

最新webpack4配置，关键是include和exclude，亲测可行，希望能帮到大家。

{
        test: /\.(css|less)$/,
        include: /node_modules/,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader', // translates CSS into CommonJS
        }, {
          loader: 'less-loader', // compiles Less to CSS
          options: { javascriptEnabled: true, sourceMap: true },
        }],
      },
      {
        test: /\.(css|less)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader', // translates CSS into CommonJS
          options: {
            modules: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
          }
        }],
      }

fixed my issue

jianan46

jianan46 commented on May 16, 2024

@jianan46
jianan46
on May 16, 2024

webpack5.91.0配置

{
  test: /\.(css|less)$/,
  include: /node_modules/,
  use: [
    {
      loader: "style-loader", // creates style nodes from JS strings
    },
    {
      loader: "css-loader", // translates CSS into CommonJS
    },
    {
      loader: "less-loader", // compiles Less to CSS
      options: {
        lessOptions: { javascriptEnabled: true, sourceMap: true },
      },
    },
  ],
},
{
  test: /\.(css|less)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "style-loader", // creates style nodes from JS strings
    },
    {
      loader: "css-loader", // translates CSS into CommonJS
      options: {
        modules: {
          mode: "local",
          localIdentName: "[path][name]__[local]--[hash:base64:5]",
        },
      },
    },
  ],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @afc163@huayezhiwu@cike8899@JX-Zhuang@varrant

        Issue actions
          样式无法显示 · Issue #3442 · ant-design/ant-design