问题描述
我正在尝试集成https://www.npmjs.com/package/react-date-range 当我导入CSS文件时,它会出现加载程序问题。 我的webpack文件和错误消息如下所示。感谢您提供有关此问题的任何帮助
Webpack配置文件
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');
var ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
var config = require('./../config');
var BASE_PATH = process.env.BASE_PATH || '/';
module.exports = {
name: 'client',devtool: 'cheap-eval-source-map',target: 'web',mode: 'development',node: { fs: 'empty' },externals: [
{ './cptable': 'var cptable' },{ './jszip': 'jszip' }
],entry: {
app: [path.join(config.srcDir,'index.js')]
},output: {
filename: '[name].bundle.js',chunkFilename: '[name].chunk.js',path: config.distDir,publicPath: BASE_PATH
},resolve: {
modules: [
'node_modules',config.srcDir
]
},plugins: [
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,failOnError: true,allowAsyncCycles: false,cwd: process.cwd(),}),new HtmlWebpackPlugin({
template: config.srcHtmlLayout,inject: false,chunksSortMode: 'none'
}),new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),'process.env.BASE_PATH': JSON.stringify(BASE_PATH),new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin(),new ExtractCssChunks(),],module: {
rules: [
{
test: /\.js$/,exclude: /node_modules/,use: 'babel-loader'
},// Modular Styles
{
test: /\.css$/,use: [
{ loader: 'style-loader' },{
loader: 'css-loader',options: {
modules: true,importLoaders: 1,}
},{ loader: 'postcss-loader' }
],exclude: [path.resolve(config.srcDir,'styles')],include: [config.srcDir]
},{
test: /\.scss$/,{ loader: 'postcss-loader' },{
loader: 'sass-loader',options: {
includePaths: config.scssIncludes
}
}
],// Global Styles
{
test: /\.css$/,use: [
ExtractCssChunks.loader,'css-loader','postcss-loader'
],include: [path.resolve(config.srcDir,'styles')]
},'postcss-loader',// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,loader: "file-loader",options: {
name: "fonts/[name].[ext]",}
},// Files
{
test: /\.(jpg|jpeg|png|gif|svg|ico)$/,options: {
name: "static/[name].[ext]",}
}
]
},devServer: {
hot: true,contentBase: config.serveDir,compress: true,historyApiFallback: {
index: BASE_PATH
},host: '0.0.0.0',port: 3000
}
}
以下是错误消息,似乎它可以找到css文件但无法解析它,让我知道是否有人可以提供帮助。
错误消息:
ERROR in ./node_modules/react-date-range/dist/styles.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .rdrCalendarWrapper {
| box-sizing: border-box;
| background: #ffffff;
@ ./app/index.js 8:0-42
@ multi ./app/index.js
ERROR in ./node_modules/react-date-range/dist/theme/default.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .rdrCalendarWrapper{
| color: #000000;
| font-size: 12px;
@ ./app/index.js 10:0-49
@ multi ./app/index.js
解决方法
由于您是从node_modules
包中加载css文件,但是仅将include
的css loader设置为源路径。我建议将其删除:
{
test: /\.css$/,use: [
ExtractCssChunks.loader,'css-loader','postcss-loader'
],},
或者将更多包裹放入您的列表,这取决于您:
{
test: /\.css$/,include: [path.resolve(config.srcDir,'styles'),/node_modules/\react-date-range /]
},