Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

样式无法显示 #3442

Closed
cike8899 opened this issue Oct 15, 2016 · 13 comments
Closed

样式无法显示 #3442

cike8899 opened this issue Oct 15, 2016 · 13 comments

Comments

@cike8899
Copy link

cike8899 commented Oct 15, 2016 •
edited

.babelrc

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

然后引入组件

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

可是样式就是出不来，之前还好好的！
@afc163
Copy link
Member

afc163 commented Oct 16, 2016

umijs/babel-plugin-import#58

umijs/babel-plugin-import#61

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

@cike8899
Copy link
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
Copy link
Member

afc163 commented Oct 16, 2016

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

@afc163 afc163 closed this as completed Oct 16, 2016
@cike8899
Copy link
Author

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

@afc163
Copy link
Member

afc163 commented Oct 16, 2016 •
edited

简单的说，你配置了 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
Copy link
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
Copy link

让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 ghost mentioned this issue Sep 29, 2017
Open
@JX-Zhuang
Copy link
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 JX-Zhuang mentioned this issue Mar 21, 2018
Closed
@JX-Zhuang
Copy link
Contributor

You can see
#3442 (comment)

@JX-Zhuang JX-Zhuang mentioned this issue Mar 21, 2018
Closed
@varrant
Copy link

varrant commented Nov 16, 2018 •
edited

最新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
Copy link

ghost commented 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
Copy link 

        include: /node_modules/,

谢谢提供，亲测可行~~

@noobalex
Copy link

最新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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@afc163 @huayezhiwu @cike8899 @JX-Zhuang @varrant @inkinworld @noobalex