I'm currently working on a React project that utilizes styled components, and I've been attempting to integrate a CSS file as part of the react-image-gallery package.
Following the instructions provided, I included the css-loader and style-loader in my project and attempted to import the file with:
import 'react-image-gallery/styles/css/image-gallery.css'I also added the following configuration in Webpack:
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
However, when running the server, I encountered the following error message:
SyntaxError: Invalid or unexpected tokenThis was related to an issue within the CSS file, specifically the line:
@charset "UTF-8";
After doing some research, it became apparent that the CSS file was being treated as a JavaScript file by Webpack. But is this not the correct behavior?
Additional information: The app is rendered on the server side.
Any thoughts on where I might be going wrong?
Update:
The rules are defined in a rules.ts file as follows:
import webpack from 'webpack'
const ts: webpack.RuleSetRule = {
test: /^(?!.*\.spec\.tsx?$).*\.tsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
}
const img: webpack.RuleSetRule = {
test: /\.(png|jpe?g|gif|svg)$/,
use: 'file-loader',
}
const css: webpack.RuleSetRule = {
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
export default {
client: {
ts,
img,
css,
},
server: {
ts,
css,
img: { ...img, use: [{ loader: 'file-loader', options: { emitFile: false } }] },
},
}
The config file includes the following settings:
const config: webpack.Configuration = {
context: path.join(__dirname, '../../src/client'),
resolve: {
...resolve.client,
alias: { 'react-dom': '@hot-loader/react-dom' },
},
devtool: false,
entry: {
main: ['./index.tsx'],
},
mode: 'development',
module: {
rules: [rules.client.ts, rules.client.img, rules.client.css],
},
output: output.client,
plugins: [
...plugins,
...developmentPlugins,
new ForkTsCheckerWebpackPlugin({
tsconfig: path.join(__dirname, '../../tsconfig.fork-ts-checker-webpack.plugin.json'),
}),
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['!webpack.partial.html', '!favicon.ico'],
}),
],
}