我正在尝试设置 React-Table，它依赖于需要使用以下语句导入到 Webpack 中的样式表：
import ReactTable from 'react-table'
不幸的是，我对配置 Webpack 不是很熟悉，也不确定这行应该放在哪里。这是我的 webpack.config.js 文件：
const loaders = require('loaders');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js',
sourceMapFilename: "bundle.js.map"
},
module: {
loaders: [
loaders.css,
loaders.url,
{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
任何人都可以指出我正确的方向吗？
尝试使用此更新您的 webpack 文件并安装所有加载器，如 css-loader、url-loader、file-loader、style-loader、sass-loader 等。
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js',
sourceMapFilename: "bundle.js.map"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'},
{test: /\.css$/, loader: "style-loader!css-loader" },
{test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
此外，如果您想让您的样式表与 webpack 一起使用并查看应用程序中的这些更改，您可以将该样式表放在您的样式文件夹中并将其导入您的入口文件，即 src/index.js。像这样的东西：-
import './styles/style.css' ;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句