ant-design: error when compiling css

For some reason, if I include the ‘Spin’ component on my page, I get a webpack compiling error:

ERROR in ./~/antd/lib/spin/style/index.css
Module build failed: Error
    at NormalModule.onModuleBuildFailed (/code/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/code/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /code/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/code/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at /code/node_modules/less-loader/index.js:68:16
    at /code/node_modules/less/lib/less/render.js:26:35
    at /code/node_modules/less/lib/less/parse.js:62:33
    at ImportVisitor.finish [as _finish] (/code/node_modules/less/lib/less/parser/parser.js:180:28)
    at ImportVisitor._onSequencerEmpty (/code/node_modules/less/lib/less/visitors/import-visitor.js:35:14)
    at ImportSequencer.tryRun (/code/node_modules/less/lib/less/visitors/import-sequencer.js:50:14)
 @ ./app/stores/StoreList.jsx 7:14-44
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.78 kB
        [0] ./~/css-loader!./~/postcss-loader!./~/less-loader!./app/styles/Notes.less 277 bytes {0} [built]
         + 1 hidden modules
Child extract-text-webpack-plugin:
    
    ERROR in ./~/css-loader!./~/postcss-loader!./~/less-loader!./~/antd/lib/spin/style/index.css
    Module build failed: Unrecognised input
     @ /code/node_modules/antd/lib/spin/style/index.css (line 71, column 24)
     near lines:
         /* IE6~IE9 */
         -webkit-filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);
                 filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);
webpack: Failed to compile.
GET /stores 200

I assume it has something to do with the progid IE9 rules.

Now, so far my other components work fine.

I suppose I could fix this with some sort of webpack configuration tweak ?

btw, my current webpack configuration looks like this:

{
	test: /(\.less|\.css)$/,
	loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!less-loader'),
},

Please note that so far this is the only component causing this issue.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (6 by maintainers)

Most upvoted comments

@coljung try to separate less’s config and css’s config.

See: https://github.com/coljung/help-test/blob/master/antd-repo-help/ui-store/webpack.config.js#L35

You are using less-loader to process CSS, and it seems that less-loader doesn’t support this syntax:

filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);

benjycui on Feb 22, 2017

Yes, the problem is that i’ve tried to replicate the config from atool-build, and i get webpack error everytime.

If i use this:

{
	test: /\.css$/,
	loader: ExtractTextPlugin.extract(
        `${require.resolve('css-loader')}` +
        `?sourceMap&-autoprefixer!${require.resolve('postcss-loader')}`),
},
{
	test: /\.less$/,
	loader: ExtractTextPlugin.extract(
        `${require.resolve('css-loader')}?sourceMap&-autoprefixer!` +
        `${require.resolve('postcss-loader')}!` +
        `${require.resolve('less-loader')}?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`),
},

I get this errors when trying to run webpack:

I’ve tried modifying the above script multiple times, but i havent been able to find the right setup to compile properly.

coljung on Feb 23, 2017

把css和less 分开就好

wolfsky7 on Apr 4, 2018

@benjycui @afc163 I think the actual problem is the escape characters (\) are redundant in this filter function. If we change this into

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);

there is no need to separate less-loader and css-loader anymore.

HQidea on Oct 16, 2018

well, i changed my webpack to this:

{
	test: /(\.css)$/,
	loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
},
{
	test: /(\.less)$/,
	loader: ExtractTextPlugin.extract('style-loader', `css!less?modifyVars=${JSON.stringify(theme)}`),
},
...

and the components works.

thx

coljung on Feb 28, 2017