# Problem Loading CSS from html or js module
**URL:** \
**Category:** Help Requests\
**Created:** [May 4, 2020, 3:59pm UTC](https://discourse.aurelia.io/t/problem-loading-css-from-html-or-js-module/3463 "2020-05-04T15:59:20Z")\
**Posts on this page:** 6\
**Page:** 1
I am trying to include a styles.css file in my module to style the size of text boxes and other form inputs.
No matter how I try to include it, it is not being read. When I inspect the items through the developer tools in chrome, I do not see that my styles.css is loaded.
I have tried:
in search.js:
`import './styles.css'; `require( “./styles.css” );`
in search.html:
``
``
None of these options have loaded the css.
What am I missing?
---
Yes, I am using webpack, and I am using this command to run the server:
`au run --host [ipaddress]`
I did discover I’m getting a MIME error that it’s refusing to apply the style because strict MIME checking is set?
---
Make sure your webpack config rules looks something like this, this is only for css
You need to ensure you have the css-loader and style-loader packages installed
```auto
[
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? [{
loader: MiniCssExtractPlugin.loader
}, ...cssRules
] : ['style-loader', ...cssRules]
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.ts$/, loader: "ts-loader" },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
{
test: /environment\.json$/i, use: [
{ loader: "app-settings-loader", options: { env: production ? 'production' : 'development' } },
]
},
...when(tests, {
test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i],
enforce: 'post', options: { esModules: true },
})
]
```
---
My webpack config js looks like this:
```auto
module: {
rules: [
// CSS required in JS/TS files should use the style-loader that auto-injec
ts it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied
inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? [{
loader: MiniCssExtractPlugin.loader
}, ...cssRules
] : ['style-loader', ...cssRules]
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{ test: /\.html$/i, loader: 'html-loader' },
{
test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
options: tests ? { sourceMap: 'inline', plugins: ['istanbul'] } : {}
},
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
{ test: /environment\.json$/i, use: [
{loader: "app-settings-loader", options: {env: production ? 'production' : 'development' }},
]},
]
},
```
When I run ‘au run --host [ip address]’, I see this, which tells me it is trying to extract CSS?
`> webpack-dev-server --extractCss "--host" "[ip address]"`
Does my MIME error that I am getting in the console have anything to do with this problem? It is saying
```auto
Refused to apply style from 'http://[ip address]:8080/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
```
---
Never had that problem. But it seems seems to happen from time to time:
>
>
>
> i got the following issue after installing froala on my angular app.
> it's not applying the style for some reason :
> any ideas...