折腾:
【已解决】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