<Spin /> error when compiling css

[coljung]

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.

[benjycui]

It's recommended to use atool-build's config https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js

Could you provide re-producible repo?

[coljung]

I updated to 2.7.2 hoping the above would fix the issue.

I still get an error when compiling:

[benjycui]

The issue is that quotation marks are drop

Edit: maybe your loader doesn't support this syntax?

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

[afc163]

Could you share you webpack config?

Push you code to a git repo and I will check it later.

[coljung]

Here is a trimmed down copy of my current project: https://github.com/coljung/help-test/tree/master/antd-repo-help/ui-store

Also, the problem seems to be affecting other components.

I just tried using the 'loading' option for the 'Table' component, and it seems to be missing a lot of the styles associated with that as well. No errors whatsoever on my compiler or on page load.

[benjycui]

@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);

[afc163]

Like what @benjycui said, try not to parse css via less-loader. https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L108-L116

[coljung]

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]

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

[jeffz2012]

@afc163 sass isn't any better
Invalid CSS after "... filter: progid": expected "}", was ": DXImageTransform."

[lory-lu]

the same question happened to me. I read the above solutions. only I deleted the less-loader, it can work. But, How I can work with less-loader.
attach img is my webpack.config.js css config

[WALLE729]

I changed webpack.config.dev.js and works, thx

[coljung]

An update to my current configuration using Webpack 3:

module: {
        rules: [
            {
                test: /(\.js|\.jsx)$/,
                exclude: /(node_modules)/,
                use: ['babel-loader'],
            },
            {
                test: /(\.css)$/,
                use: ExtractTextPlugin.extract({
                    fallback: [{
                        loader: 'style-loader',
                    }],
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true,
                            },
                        },
                    ],
                }),
            },
            {
                test: /(\.less)$/,
                use: ExtractTextPlugin.extract({
                    fallback: [{
                        loader: 'style-loader',
                    }],
                    use: [
                        'css-loader',
                        'less-loader',
                    ],
                }),
            },
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=50000&name=[path][name].[ext]',
            },
        ],
    },

[WALLE729]

webpack.dev.config.js? walle89729 邮箱：walle89729@gmail.com 签名由 网易邮箱大师 定制 On 01/19/2018 21:58, Pablo Rincon wrote: An update to my current configuration using Webpack 3: module: { rules: [ { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, use: ['babel-loader'], }, { test: /(\.css)$/, use: ExtractTextPlugin.extract({ fallback: [{ loader: 'style-loader', }], use: [ { loader: 'css-loader', options: { minimize: true, }, }, ], }), }, { test: /(\.less)$/, use: ExtractTextPlugin.extract({ fallback: [{ loader: 'style-loader', }], use: [ 'css-loader', 'less-loader', ], }), }, { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]', }, ], }, —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/ant-design/ant-design","title":"ant-design/ant-design","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/ant-design/ant-design"}},"updates":{"snippets":[{"icon":"PERSON","message":"@coljung in #4915: An update to my current configuration using Webpack 3:\r\n\r\n```\r\nmodule: {\r\n rules: [\r\n {\r\n test: /(\\.js|\\.jsx)$/,\r\n exclude: /(node_modules)/,\r\n use: ['babel-loader'],\r\n },\r\n {\r\n test: /(\\.css)$/,\r\n use: ExtractTextPlugin.extract({\r\n fallback: [{\r\n loader: 'style-loader',\r\n }],\r\n use: [\r\n {\r\n loader: 'css-loader',\r\n options: {\r\n minimize: true,\r\n },\r\n },\r\n ],\r\n }),\r\n },\r\n {\r\n test: /(\\.less)$/,\r\n use: ExtractTextPlugin.extract({\r\n fallback: [{\r\n loader: 'style-loader',\r\n }],\r\n use: [\r\n 'css-loader',\r\n 'less-loader',\r\n ],\r\n }),\r\n },\r\n {\r\n test: /\\.(gif|jpg|png|woff|svg|eot|ttf)\\??.*$/,\r\n loader: 'url-loader?limit=50000\u0026name=[path][name].[ext]',\r\n },\r\n ],\r\n },\r\n```"}],"action":{"name":"View Issue","url":"#4915 (comment)"}}}

[wolfsky7]

把css和less 分开就好

[chenhebing]

@lory-lu

I try to separate node_modules css config and my css config, then it is worked. My webpack version is 4.

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
        use: ['css-loader', {
            loader: 'postcss-loader',
            options: {
                config: {
                    path: path.resolve(__dirname, '../postcss.config.js')
                }
            }
        }, 'less-loader']
    }))
}, {
    test: /\.css$/,
    include: /node_modules/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader']
    })
}

[HQidea]

@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.

[panjiefeng]

the code 'filter: ~"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"' can be modified as 'filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"' or 'filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)' and it is ok like that. I don't understand why the source code like that.