最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】Reactjs中导入react-weui.css出错编译:You may need an appropriate loader to handle this file type

ReactJS crifan 2777浏览 0评论

折腾:

【已解决】ReactJS中如何实现在底部的tab选项卡且支持图标

期间,代码:

import { Button } from ‘react-weui’;
//import styles
import ‘weui’;
import ‘react-weui/build/packages/react-weui.css’;

结果

npm run build

报错:

ERROR in ./node_modules/react-weui/build/packages/react-weui.css
Module parse failed: /Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/react-weui/build/packages/react-weui.css Unexpected token (1:18)
You may need an appropriate loader to handle this file type.
| label.weui-cell > *,
| label.weui-agree > * {
|   pointer-events: none;
@ ./src/pages/main/main.js 49:0-51
@ ./src/pages/app.js
@ ./src/app.entry.js

很明显是css没有编译。

然后去看到当前的webpack中的配置:

{
        test: /\.css$/,
        // use: [‘style-loader’, ‘css-loader’],
        // use: [
        //   { loader: ‘style-loader’ },
        //   {
        //     loader: ‘css-loader’,
        //     options: {
        //       modules: true
        //     }
        //   }
        // ],
        use: ExtractTextPlugin.extract({
          fallback: ‘style-loader’, // 编译后用什么loader来提取css文件
          use: ‘css-loader’ //指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
        }),
        // use: extractCSS.extract([ ‘css-loader’, ‘postcss-loader’ ]),
        // use: extractCSS.extract([
        //   ‘css-loader’,
        //   {
        //     loader: ‘postcss-loader’,
        //     options: {
        //       // plugins: () => [require(‘autoprefixer’)]
        //     }
        //   }
        // ]),
        
        include: path.resolve(__dirname, ‘src’)
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: ‘style-loader’ // creates style nodes from JS strings
          }, {
            loader: ‘css-loader’ // translates CSS into CommonJS
          }, {
            loader: ‘less-loader’ // compiles Less to CSS
          }
        ]
        // test: /\.less$/i,
        // use: extractLESS.extract([ ‘css-loader’, ‘less-loader’ ])
      },

很明显,对于css来说,用了

include: path.resolve(__dirname, ‘src’)

导致此处的其他文件夹

node_modules

中的css,无法被编译了。

但是直接去掉吧。

又觉得不是很妥当。

干脆参考之前preact-pioplate的做法,去改为:

const CSS_MAPS = !isProd;
      {
        // Transform our own .(less|css) files with PostCSS and CSS-modules
        test: /\.(less|css)$/,
        include: [
          path.resolve(__dirname, ‘src/components’),
          path.resolve(__dirname, ‘src/container’)
        ],
        use: ExtractTextPlugin.extract({
          fallback: ‘style-loader’,
          use: [
            {
              loader: ‘css-loader’,
              options: { modules: true, sourceMap: CSS_MAPS, importLoaders: 1 }
            },
            {
              loader: `postcss-loader`,
              options: {
                sourceMap: CSS_MAPS,
                plugins: () => {
                  autoprefixer({ browsers: [ ‘last 2 versions’ ] });
                }
              }
            },
            {
              loader: ‘less-loader’,
              options: { sourceMap: CSS_MAPS }
            }
          ]
        })
      },
      {
        test: /\.(less|css)$/,
        exclude: [
          path.resolve(__dirname, ‘src/components’),
          path.resolve(__dirname, ‘src/container’)
        ],
        use: ExtractTextPlugin.extract({
          fallback: ‘style-loader’,
          use: [
            {
              loader: ‘css-loader’,
              options: { sourceMap: CSS_MAPS, importLoaders: 1 }
            },
            {
              loader: `postcss-loader`,
              options: {
                sourceMap: CSS_MAPS,
                plugins: () => {
                  autoprefixer({ browsers: [ ‘last 2 versions’ ] });
                }
              }
            },
            {
              loader: ‘less-loader’,
              options: { sourceMap: CSS_MAPS }
            }
          ]
        })
      },

看看能否正常编译。

结果报错:

Module build failed: ReferenceError: autoprefixer is not defined

ERROR in ./node_modules/weui/dist/style/weui.css
Module build failed: ModuleBuildError: Module build failed: ReferenceError: autoprefixer is not defined
    at Object.plugins (/Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/webpack.config.babel.js:254:19)
    at Object.parseOptions (/Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/postcss-loader/lib/options.js:5:37)
    at Promise.resolve.then (/Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/postcss-loader/lib/index.js:64:27)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)
    at runLoaders (/Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/postcss-loader/lib/index.js:176:71)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)

结果发现webpack配置中,缺少对应的:

import autoprefixer from ‘autoprefixer’;

去加上,再去安装

autoprefixer

➜  ReactjsTemplate git:(master) ✗ npm install autoprefixer –save-dev
added 5 packages, removed 1 package and updated 1 package in 10.288s

看看结果

然后就正常编译了。

【总结】

此处,无法编译node_modules中的其他库的css,是由于之前配置的css解析中,加上了目录的限制:

include: path.resolve(__dirname, ‘src’)

所以只能解析此处src文件夹(自己项目的代码)中的css

去掉该限制,其实就可以了。

但是还是进一步优化,改为之前别人的配置:

import autoprefixer from ‘autoprefixer’;
const CSS_MAPS = !isProd;
      {
        // Transform our own .(less|css) files with PostCSS and CSS-modules
        test: /\.(less|css)$/,
        include: [
          path.resolve(__dirname, ‘src/components’),
          path.resolve(__dirname, ‘src/container’)
        ],
        use: ExtractTextPlugin.extract({
          fallback: ‘style-loader’,
          use: [
            {
              loader: ‘css-loader’,
              options: { modules: true, sourceMap: CSS_MAPS, importLoaders: 1 }
            },
            {
              loader: `postcss-loader`,
              options: {
                sourceMap: CSS_MAPS,
                plugins: () => {
                  autoprefixer({ browsers: [ ‘last 2 versions’ ] });
                }
              }
            },
            {
              loader: ‘less-loader’,
              options: { sourceMap: CSS_MAPS }
            }
          ]
        })
      },
      {
        test: /\.(less|css)$/,
        exclude: [
          path.resolve(__dirname, ‘src/components’),
          path.resolve(__dirname, ‘src/container’)
        ],
        use: ExtractTextPlugin.extract({
          fallback: ‘style-loader’,
          use: [
            {
              loader: ‘css-loader’,
              options: { sourceMap: CSS_MAPS, importLoaders: 1 }
            },
            {
              loader: `postcss-loader`,
              options: {
                sourceMap: CSS_MAPS,
                plugins: () => {
                  autoprefixer({ browsers: [ ‘last 2 versions’ ] });
                }
              }
            },
            {
              loader: ‘less-loader’,
              options: { sourceMap: CSS_MAPS }
            }
          ]
        })
      },

以便于支持css modules。

转载请注明:在路上 » 【已解决】Reactjs中导入react-weui.css出错编译:You may need an appropriate loader to handle this file type

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.174 seconds, using 22.16MB memory