我希望能够在我的react应用程序中使用import
,不仅可以用于js / jsx文件,还可以用于css文件。根据我的阅读,最好的方法是使用extract-text-webpack-plugin
来获取导入的css文件并将它们捆绑在一起。
我已将其设置为生成我的捆绑css文件,但出于某种原因,每次我加载页面时都会出现语法错误:
SyntaxError: MyWebpage/views/global.css: Unexpected token, expected ; (1:5)
> 1 | body {
| ^
2 | margin: 0;
3 | }
我的设置如下:
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: ['babel-polyfill', './views/Index.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public'
},
module: {
rules: [
{ test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;
入口点./views/Index.js
是我导入我的css文件的地方:
Index.js
import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';
class Index extends React.Component {
render() {
return (
<Layout title={this.props.title}>
<PageContent />
</Layout>
);
}
}
export default Index;
在导入的./Layout.jsx
文件中,我使用<link>
在我的页面中包含捆绑的css文件:
Layout.jsx
import React from 'react';
class Layout extends React.Component {
render() {
return (
<html>
<head>
<title>{this.props.title}</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root">
{this.props.children}
</div>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>
);
}
}
export default Layout;
我很困惑,因为看起来我的应用程序正常运行,但是当我尝试访问我的网页时,我一直收到语法错误。
有谁能帮助我理解我做错了什么?
答案 0 :(得分:0)
以下加载器的问题似乎是为jsx和css加载器工作的webpack.config.js文件的示例:
module.exports = {
entry: './app/index.js',
output: {
path: __dirname,
filename: 'dist/bundle.js'
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'react-hmre']
}
},
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}]
}
};
答案 1 :(得分:0)
看来babel或webpack没有加载加载程序。
此变体可以帮助我(只需将其包含在webpack.config.js中):
require.extensions['.css'] = () => {
return;
};
更多内容... [link]