Problem Loading CSS from html or js module

Help Requests
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:

<link rel="stylesheet" type="text/css" href="./styles.css" media="screen" />
<require from="./styles.css"></require>

None of these options have loaded the css.

What am I missing?

1 Like
2

Are you using webpack?

1 Like
3

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?

1 Like
4

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

[
      // 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 },
      })
    ]
1 Like
5

My webpack config js looks like this:

  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

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.
1 Like
6

Never had that problem. But it seems seems to happen from time to time: