问题
I'm not too familiar with webpack but I think it's causing a problem. I'm using a react boilerplate and have installed react-table as a dependancy. Added the code and all is displaying but the css is not. If anyone can point me in the right direction I would be very grateful!
This is how I added it to my component
import ReactTable from 'react-table';
import 'react-table/react-table.css';
In my render, I'm doing the following
<ReactTable
noDataText="No data available"
data={this.state.rows}
columns={[
{
columns: this.state.columns
}
]}
getTdProps={(state, rowInfo, column, instance) => ({
onMouseEnter: e =>
console.log('Cell - onMouseEnter', {
state,
rowInfo,
column,
instance,
event: e,
}),
})}
defaultPageSize={10}
className="-striped -highlight"
/>
This is what my webpack.config.js looks like
resolve: {
// Allow absolute paths in imports, e.g. import Button from 'components/Button'
// Keep in sync with .flowconfig and .eslintrc
modules: ['node_modules', 'src'],
},
module: {
// Make missing exports an error instead of warning
strictExportPresence: true,
rules: [
// Rules for JS / JSX
{
test: reScript,
include: [SRC_DIR, resolvePath('tools')],
loader: 'babel-loader',
options: {
// https://github.com/babel/babel-loader#options
cacheDirectory: isDebug,
// https://babeljs.io/docs/usage/options/
babelrc: false,
presets: [
// A Babel preset that can automatically determine the Babel plugins and polyfills
// https://github.com/babel/babel-preset-env
[
'@babel/preset-env',
{
targets: {
browsers: pkg.browserslist,
},
forceAllTransforms: !isDebug, // for UglifyJS
modules: false,
useBuiltIns: false,
debug: false,
},
],
// Experimental ECMAScript proposals
// https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-
['@babel/preset-stage-2', { decoratorsLegacy: true }],
// Flow
// https://github.com/babel/babel/tree/master/packages/babel-preset-flow
'@babel/preset-flow',
// JSX
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
['@babel/preset-react', { development: isDebug }],
],
plugins: [
// Treat React JSX elements as value types and hoist them to the highest scope
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
...(isDebug ? [] : ['@babel/transform-react-constant-elements']),
// Replaces the React.createElement function with one that is more optimized for production
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
...(isDebug ? [] : ['@babel/transform-react-inline-elements']),
// Remove unnecessary React propTypes from the production build
// https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
...(isDebug ? [] : ['transform-react-remove-prop-types']),
],
},
},
// Rules for Style Sheets
{
test: reStyle,
rules: [
// Convert CSS into JS module
{
issuer: { not: [reStyle] },
use: 'isomorphic-style-loader',
},
// Process external/third-party styles
{
exclude: SRC_DIR,
loader: 'css-loader',
options: {
sourceMap: isDebug,
minimize: isDebug ? false : minimizeCssOptions,
},
},
// Process internal/project styles (from src folder)
{
include: SRC_DIR,
loader: 'css-loader',
options: {
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug
? '[name]-[local]-[hash:base64:5]'
: '[hash:base64:5]',
// CSS Nano http://cssnano.co/
minimize: isDebug ? false : minimizeCssOptions,
},
},
// Apply PostCSS plugins including autoprefixer
// {
// exclude: ['react-table/react-table.css'],
// loader: 'postcss-loader',
// options: {
// config: {
// path: './tools/postcss.config.js',
// },
// },
// },
// Compile Less to CSS
// https://github.com/webpack-contrib/less-loader
// Install dependencies before uncommenting: yarn add --dev less-loader less
// {
// test: /\.less$/,
// loader: 'less-loader',
// },
// Compile Sass to CSS
// https://github.com/webpack-contrib/sass-loader
// Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
// {
// test: /\.(scss|sass)$/,
// loader: 'sass-loader',
// },
],
},
// Rules for images
{
test: reImage,
oneOf: [
// Inline lightweight images into CSS
{
issuer: reStyle,
oneOf: [
// Inline lightweight SVGs as UTF-8 encoded DataUrl string
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
},
},
// Inline lightweight images as Base64 encoded DataUrl string
{
loader: 'url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
},
},
],
},
// Or return public URL to image resource
{
loader: 'file-loader',
options: {
name: staticAssetName,
},
},
],
},
// Convert plain text into JS module
{
test: /\.txt$/,
loader: 'raw-loader',
},
// Convert Markdown into HTML
{
test: /\.md$/,
loader: path.resolve(__dirname, './lib/markdown-loader.js'),
},
// Return public URL for all assets unless explicitly excluded
// DO NOT FORGET to update `exclude` list when you adding a new loader
//
{
exclude: [reScript, reStyle, reImage, /\.json$/, /\.txt$/, /\.md$/],
loader: 'file-loader',
options: {
name: staticAssetName,
},
},
// Exclude dev modules from production build
...(isDebug
? []
: [
{
test: resolvePath(
'node_modules/react-deep-force-update/lib/index.js',
),
loader: 'null-loader',
},
]),
],
},
// Don't attempt to continue if there are any errors.
bail: !isDebug,
cache: isDebug,
// Specify what bundle information gets displayed
// https://webpack.js.org/configuration/stats/
stats: {
cached: isVerbose,
cachedAssets: isVerbose,
chunks: isVerbose,
chunkModules: isVerbose,
colors: true,
hash: isVerbose,
modules: isVerbose,
reasons: isDebug,
timings: true,
version: isVerbose,
},
// Choose a developer tool to enhance debugging
// https://webpack.js.org/configuration/devtool/#devtool
devtool: isDebug ? 'cheap-module-inline-source-map' : 'source-map',
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = {
...config,
name: 'client',
target: 'web',
entry: {
client: ['@babel/polyfill', './src/client.js'],
client_config: './src/appSettings.config'
},
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.BROWSER': true,
__DEV__: isDebug,
C_API: JSON.stringify(C_API),
}),
// Emit a file with assets paths
// https://github.com/webdeveric/webpack-assets-manifest#options
new WebpackAssetsManifest({
output: `${BUILD_DIR}/asset-manifest.json`,
publicPath: true,
writeToDisk: true,
customize: ({ key, value }) => {
// You can prevent adding items to the manifest by returning false.
if (key.toLowerCase().endsWith('.map')) return false;
return { key, value };
},
done: (manifest, stats) => {
// Write chunk-manifest.json.json
const chunkFileName = `${BUILD_DIR}/chunk-manifest.json`;
try {
const fileFilter = file => !file.endsWith('.map');
const addPath = file => manifest.getPublicPath(file);
const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {
acc[c.name] = [
...(acc[c.name] || []),
...c.chunks.reduce(
(files, cc) => [
...files,
...cc.files.filter(fileFilter).map(addPath),
],
[],
),
];
return acc;
}, Object.create(null));
fs.writeFileSync(chunkFileName, JSON.stringify(chunkFiles, null, 2));
} catch (err) {
console.error(`ERROR: Cannot write ${chunkFileName}: `, err);
if (!isDebug) process.exit(1);
}
},
}),
...(isDebug
? []
: [
// Webpack Bundle Analyzer
// https://github.com/th0r/webpack-bundle-analyzer
...(isAnalyze ? [new BundleAnalyzerPlugin()] : []),
]),
],
// Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
},
},
},
},
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
// https://webpack.js.org/configuration/node/
// https://github.com/webpack/node-libs-browser/tree/master/mock
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = {
...config,
name: 'server',
target: 'node',
entry: {
server: ['@babel/polyfill', './src/server.js'],
},
output: {
...config.output,
path: BUILD_DIR,
filename: '[name].js',
chunkFilename: 'chunks/[name].js',
libraryTarget: 'commonjs2',
},
// Webpack mutates resolve object, so clone it to avoid issues
// https://github.com/webpack/webpack/issues/4817
resolve: {
...config.resolve,
},
module: {
...config.module,
rules: overrideRules(config.module.rules, rule => {
// Override babel-preset-env configuration for Node.js
if (rule.loader === 'babel-loader') {
return {
...rule,
options: {
...rule.options,
presets: rule.options.presets.map(
preset =>
preset[0] !== '@babel/preset-env'
? preset
: [
'@babel/preset-env',
{
targets: {
node: pkg.engines.node.match(/(\d+\.?)+/)[0],
},
modules: false,
useBuiltIns: false,
debug: false,
},
],
),
},
};
}
// Override paths to static assets
if (
rule.loader === 'file-loader' ||
rule.loader === 'url-loader' ||
rule.loader === 'svg-url-loader'
) {
return {
...rule,
options: {
...rule.options,
emitFile: false,
},
};
}
return rule;
}),
},
externals: [
'./chunk-manifest.json',
'./asset-manifest.json',
nodeExternals({
whitelist: [reStyle, reImage],
}),
],
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.BROWSER': false,
__DEV__: isDebug,
}),
// Adds a banner to the top of each generated chunk
// https://webpack.js.org/plugins/banner-plugin/
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false,
}),
],
// Do not replace node globals with polyfills
// https://webpack.js.org/configuration/node/
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
};
export default [clientConfig, serverConfig];
UPDATE MODIFIED webpack.config
// Rules for Style Sheets
{
test: reStyle,
rules: [
// Convert CSS into JS module
{
issuer: { not: [reStyle] },
use: 'isomorphic-style-loader',
},
// Process external/third-party styles
{
exclude: SRC_DIR,
loader: 'css-loader',
options: {
sourceMap: isDebug,
minimize: isDebug ? false : minimizeCssOptions,
},
},
// Process internal/project styles (from src folder)
{
include: SRC_DIR,
loader: 'css-loader',
options: {
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug
? '[name]-[local]-[hash:base64:5]'
: '[hash:base64:5]',
// CSS Nano http://cssnano.co/
minimize: isDebug ? false : minimizeCssOptions,
},
},
{
loader: 'style-loader'
},
回答1:
Finally figured it out after days and days of trial and error. HTH someone else!
In your component make sure you are importing import withStyles from 'isomorphic-style-loader/lib/withStyles';
Then import your module css and give it an alias. import rdatescss from 'react-datepicker/dist/react-datepicker.css';
End your component with the following export default withStyles(rdatescss)(NAMEOFCOMPONENT);
To add multiple styles use the export default withStyles(rdatescss, other_style_alias)(NAMEOFCOMPONENT);
Here are the rules in my webpack (4.12.0)
{
test: reStyle,
rules: [
// Convert CSS into JS module
{
issuer: { not: [reStyle] },
use: 'isomorphic-style-loader',
},
// Process internal/project styles (from src folder)
{
include: SRC_DIR,
loader: 'css-loader',
options: {
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug
? '[name]-[local]-[hash:base64:5]'
: '[hash:base64:5]',
// CSS Nano http://cssnano.co/
minimize: isDebug ? false : minimizeCssOptions,
},
},
// Apply PostCSS plugins including autoprefixer
{
loader: 'postcss-loader',
options: {
config: {
path: './tools/postcss.config.js',
},
},
}
//{ //this rule will only be used for any vendors
// test: /\.css$/,
// loaders: ['style-loader', 'css-loader'],
// include: [/node_modules/]
//},
// Compile Less to CSS
// https://github.com/webpack-contrib/less-loader
// Install dependencies before uncommenting: yarn add --dev less-loader less
// {
// test: /\.less$/,
// loader: 'less-loader',
// },
// Compile Sass to CSS
// https://github.com/webpack-contrib/sass-loader
// Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
// {
// test: /\.(scss|sass)$/,
// loader: 'sass-loader',
// },
],
},
回答2:
My issue was I was not importing react-table.css with WithStyle that's why it was not working. then I used it like see example
import rt from "react-table/react-table.css";
export default compose(
withStyles(rt),
connect(
mapStateToProps,
{
},
),
)(ApplicationList);
来源：https://stackoverflow.com/questions/51503415/react-table-css-not-loading-is-webpack-the-issue