Question

如何解决这个问题？是否使用 webpack？

2018-09-14

2340

css reactjs webpack

ERROR in ./node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. .swing div {

在 webpack.config.js 中：

{
            test: /\.s?[ac]ss$/,
            include: [
                path.resolve(__dirname, 'react'),
            ],
            use: [

                MiniCssExtractPlugin.loader,

                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        minimize: !devMode
                    }
                },

                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [

                            autoprefixer({
                                browsers: [
                                    '>5%',
                                    'last 2 versions',
                                    'not ie < 9',
                                ],


                            }),


                        ]
                    }

                },

                'sass-loader'
            ]
        },

Answer 1

此处您指示 webpack 仅对 path.resolve(__dirname, 'react') 内的文件使用规则

{
   test: /\.s?[ac]ss$/,
   include: [
       path.resolve(__dirname, 'react'),
   ]

但在代码中的某处您导入了该文件 ./node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css 并且它不在 path.resolve(__dirname, 'react') 内，因此 webpack 不会对其进行转译。

最简单的解决方案是从您的配置中删除它。

   include: [
       path.resolve(__dirname, 'react'),
   ]

或将该模块添加到您的 include 数组中：

   include: [
       path.resolve(__dirname, 'src'),
       path.resolve(__dirname, 'node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css'),
   ],