Reactjs 网页包css加载程序失败:“0”;您可能需要适当的加载程序来处理此文件类型;
我正在构建一个使用TypeScript和Webpack4的React应用程序。我正试图从Reactjs 网页包css加载程序失败:“0”;您可能需要适当的加载程序来处理此文件类型;,reactjs,typescript,webpack,css-loader,Reactjs,Typescript,Webpack,Css Loader,我正在构建一个使用TypeScript和Webpack4的React应用程序。我正试图从react select导入CSS文件,但出现一般错误: ERROR in ./node_modules/react-select/dist/react-select.css Module parse failed: Unexpected token (8:0) You may need an appropriate loader to handle this file type. | * MIT Lice
react select
导入CSS文件,但出现一般错误:
ERROR in ./node_modules/react-select/dist/react-select.css
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
| * MIT License: https://github.com/JedWatson/react-select
| */
| .Select {
| position: relative;
| }
@ ./src/App.react.tsx 28:0-45
@ ./src/Root.react.tsx
@ ./src/index.tsx
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.tsx
我在尝试为.graphql
文件添加加载程序之前遇到了类似的问题。。。我想这些问题是相关的;我的配置中的某些东西必须关闭,无法利用这些额外的加载程序
我直接使用了barebonescss加载程序
设置
我的文件加载器
工作得非常好
以下是我认为相关的代码片段:
从webpack.common.ts
:
const config: webpack.Configuration = {
module: {
rules: [
...
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.css'],
},
...
};
从App.react.tsx
:
import 'react-select/dist/react-select.css';
...
但是,猜测是不是有什么超出了这个范围的东西导致了这个问题。更多上下文
webpack.common.ts
import * as HTMLPlugin from 'html-webpack-plugin';
import * as CleanWebpackPlugin from 'clean-webpack-plugin';
import * as webpack from 'webpack';
const config: webpack.Configuration = {
// Root TS file for bundling
entry: './src/index.tsx',
module: {
rules: [
// Bundle files (e.g. images)
{
test: /\.(png|jpg|gif)$/,
use: ['file-loader'],
},
// Transpile & type check with babel/typescript loader
{
test: /\.tsx?$/,
use: [
{
// Need babel for React HMR support (otherwise could drop babel and use just typescript)
loader: 'babel-loader',
options: {
babelrc: true,
plugins: ['react-hot-loader/babel'],
},
},
'ts-loader',
],
},
// Handle .css files
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
],
},
// Enable served source maps
devtool: 'inline-source-map',
resolve: {
// Include all these extensions in processing (note we need .js because not all node_modules are .ts)
extensions: ['.ts', '.tsx', '.js', '.css'],
},
// Webpack Dev Server for running locally
devServer: {
// Play nicely with react-router
historyApiFallback: true,
port: 3000,
// Enable hot module reloading (HMR)
hot: true,
},
plugins: [
// Cleans the build folder per-build/reload
new CleanWebpackPlugin(['dist']),
// Builds the .html file for entering into bundle
new HTMLPlugin({
template: 'INDEX_TEMPLATE.html',
}),
// HMR plugins
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// Prevents webpack watch from going into infinite loop (& stopping on retry) due to TS compilation
new webpack.WatchIgnorePlugin([
/\.js$/,
/\.d\.ts$/,
]),
],
};
export default config;
tsconfig.json
{
"compilerOptions": {
// Required option for react-hot-loader
"target": "es6",
// Required option for react-hot-loader
"module": "commonjs",
"strict": true,
"jsx": "react",
// Absolute imports start from here
"baseUrl": ".",
"sourceMap": true
}
}
请让我知道是否还有其他值得注意的问题。。。谢谢 OP在这里。这似乎是一个愚蠢的问题:我在WebStorm TypeScript编译器上单击了“编译全部”,css加载程序开始正常工作。所以我猜webpack使用了一个未更新的
webpack.common.js
文件,而不是我问题中的webpack.common.ts
文件
试图理解为什么它引用已编译的.js
文件,即使我的命令是:
webpack dev server--模式开发--打开--配置/webpack.development.ts
可能与我使用webpack merge
导入webpack.common:import common from./webpack.common'有关代码>。导入中的SAN扩展,由于某些原因,它必须默认为.js
如果其他人遇到此问题,请参阅此问题的有用提示:使用tsconfig.json中的outDir选项将生成的文件(.js和.js.map)输出到其他文件夹。然后可以轻松清理生成文件夹
如果我发现更多,我会向你汇报