在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ webpack 配置 antd 樣式出錯(cuò)

webpack 配置 antd 樣式出錯(cuò)

想使用antd按需加載，代碼如下：

import { Button } from 'antd';

.babelrc配置如下：

{
  "presets": ["es2015","react","stage-0","env"],
  "plugins": ["react-hot-loader/babel",["import", { "libraryName": "antd", "style": true }]],
  "env": {
    "production":{
      "preset":["react-optimize"]
    }
  }
}

但是會(huì)報(bào)錯(cuò)，
clipboard.png

錯(cuò)誤信息賦值如下：

ERROR in ./node_modules/antd/lib/button/style/index.less
Module parse failed:
/Users/Nealyang/Documents/code/code-work/Demo/nodejs/React-Express-Blog-Demo/node_modules/antd/lib/button/style/index.less
Unexpected character '@' (1:0) You may need an appropriate loader to
handle this file type. | @import "../../style/themes/default"; |
@import "../../style/mixins/index"; | @import "./mixin"; @
./node_modules/antd/lib/button/style/index.js 5:0-23 @
./app/containers/index.js @ ./app/index.js @ multi
react-hot-loader/patch
webpack-hot-middleware/client?path=http://127.0.0.1:3000/__webpa...
babel-polyfill ./app/index.js

我之前webpack只處理了css的樣式，后來(lái)又加上了less-loader,但是依舊不行。

webpack.js代碼如下：

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[name]-[local]-[hash:base64:5]',
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /antd.*\.less$/,
                exclude: /node_modules/,
                use: ["style-loader", {loader: 'css-loader', options: {sourceMap: 1}}, "postcss-loader", "less-loader"]
            },

查了各種解決方案，還是不行，求大神指點(diǎn)。ps：css我一直用的css-modules

當(dāng)webpack.js配置如下

{
                test: /\.less$/,
                use: ["style-loader", 'css-loader', "postcss-loader", "less-loader"]
            },

錯(cuò)誤如下：

clipboard.png

回答
編輯回答
怪痞

webpack config


{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                }
              },
              {
                loader: require.resolve('postcss-loader')
              }
            ]
          },
          {
            test: /\.less$/,
            exclude: [/src/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                }
              },
              {
                loader: require.resolve('postcss-loader')
              },
              {
                loader: require.resolve('less-loader'),
                options: { modifyVars: { '@primary-color': '#1DA57A' } }
              }
            ]
          },
          {
            test: /\.less$/,
            exclude: [/node_modules/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  modules: true,
                  localIdentName: '[local]_[hash:base64:8]'
                }
              },
              {
                loader: require.resolve('postcss-loader')
              },
              {
                loader: require.resolve('less-loader'),
                options: { modifyVars: { '@primary-color': '#1DA57A' } }
              }
            ]
          },

看了你的代碼，是采用css module,就要分開(kāi)配置。antd less要全局編譯。

2017年7月26日 23:10
編輯回答
純妹

同問(wèn) 這個(gè)問(wèn)題怎么解決呀 樓上的“在css和less配置里面刪除 exclude: /node_modules/,”這個(gè)方法不管用

2017年3月16日 05:39
編輯回答
刮刮樂(lè)

在css和less配置里面刪除 exclude: /node_modules/,

2017年12月23日 12:46
編輯回答
乖乖噠

怎么解決啊。。。。。

2017年3月28日 11:40
編輯回答
念初

感覺(jué)這好是一個(gè)大坑，處理less，不僅需要安裝less-loader ,還需要安裝less
https://github.com/webpack-co...

2017年1月21日 19:47
編輯回答
掛念你

我之前也看到過(guò)出現(xiàn)該問(wèn)題在最下面：原因應(yīng)該是您webpack的loaders配置加入了exclude(將antd資源排除其外)和include(未能將antd資源包含其內(nèi))。

//不應(yīng)該exclude
exclude: /node_modules/,
//而且要include，而且要注意一下/node_modules/antd這個(gè)路徑是否正確
include: path.join(__dirname, '/node_modules/antd'),

希望能幫到您。

ERROR in ./node_modules/antd/lib/style/index.css
Module parse failed: Unexpected token (12:5)
You may need an appropriate loader to handle this file type.
|  *    IE on Windows Phone and in iOS.
|  */
| html {
|   line-height: 1.15;
|   /* 1 */
 @ ./node_modules/antd/lib/button/style/css.js 3:0-32
2018年1月15日 12:08
編輯回答
夏夕

我也碰到類似問(wèn)題了。

Failed to compile.

./node_modules/antd/lib/button/style/index.less
Module build failed:

@import "../../style/mixins/index";
@import "./mixin";
^
Can't resolve './mixin' in '/Users/wangjie19/Documents/code/websit/sitereact/node_modules/antd/lib/button/style'

  in /Users/wangjie19/Documents/code/websit/sitereact/node_modules/antd/lib/button/style/index.less (line 3, column 0)
2017年8月11日 15:23
編輯回答
茍活

我也遇到了這個(gè)問(wèn)題，用以下方案可以解決。
1.安裝babel-plugin-import ,然后在babel的plugin配置

 rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015'],
                        cacheDirectory: true,
                        plugins: ['react-hot-loader/babel',["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]],
                    }
                },
                exclude: /node_modules/
            },
           
            }
        ]

2.配置style-loader

 {
                test: /\.css$/,loader: "style-loader!css-loader"
            },

3.對(duì)字體處理

 {
                test: /\.(eot|woff|woff2|ttf)/,
                loader: "url-loader?limit=30000&name=fonts/[hash:8].[name].[ext]"
            },
2017年5月4日 02:43
編輯回答
陌顏

看看這里能不能幫到你

2017年3月16日 23:11
編輯回答
愿如初
    test: /\.less$/,
    // include: [resolve('src')],

去掉less規(guī)則下類似：
include: [resolve('src')]
exclude:/node_modules
的目錄設(shè)置，antd中l(wèi)ess文件也需要編譯

2017年10月19日 08:09