I am using Webpack to build my chrome extension and I am trying to import a CSS file as a string so that I can inject it into a shadow DOM. However, when I import the CSS file, it is imported as JavaScript code instead of the CSS content.
The contents of the imported CSS string.
import css from './content.styles.css';
console.log(css);
import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
import domAPI from "!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
import insertFn from "!../../../node_modules/style-loader/dist/runtime/insertBySelector.js";
import setAttributes from "!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js";
import insertStyleElement from "!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js";
....
....
Here is my webpack config
{
test: /\.css$/,
include: path.resolve(__dirname, 'src/pages/Content'),
use: [
'raw-loader',
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [tailwindcss, autoprefixer],
},
},
},
],
}
it was working fine until yesterday, I didn't make any changes to the config. This happened randomly after I did npm build on the project, and now every time I start the project, I get the same result. It has happened before but I thought I'd fixed it.
Things I've tried, but don't work
- Switched the order of loaders
- removed all loaders and only used raw-loaders (this imports CSS, but tailwind @import directives are ignored and tailwind isn't bundled in the final file.)
- If I remove style-loader and keep css-loader and postcss-loader, I also get js in the imported string.
Just a note - I've got two rules using the above config. The first rule is for a specific folder and the other rule is for the rest of the files/folders. In the 2nd rule, I specifically exclude path.resolve(__dirname, 'src/pages/Content') so that it doesn't conflict with the first.
Any help is appreciated, thank you!
