Closed bigopon closed 6 years ago
First thing to check when it comes to loading CSS with Aurelia: are your loaders properly configured?
If answer is yes, it would be nice to provide a few details on the error you get or what is actually happening.
Generally speaking, there is no special considerations for this in Webpack plugin, so apart from your configuration there's a good chance that problems stem from the runtime.
Hmm @bigopon can you clarify the difference with this approach and import './xxx.css'
For following comparison:
In a custom element view, we can require css
<template>
<require from='some.css'></require>
</template>
Now if we do the same thing in custom attribute, it would be consistent, the way we load css resources.
There is no issue with import 'some.css'
, but it would make quite a puzzle for maintenance there, as why require here and there and import there and where ?
@bigopon so to summarize it's kinda syntactic sugar. Right? no difference in produced result. I.e. css is not scoped shadowDommed.. or anything?
kind of no. but we can always do some more work to scope it , if need be.
well newcomer
advocate in me says it won't be used by many.
It adds consistency in thinking about implementation details..
So you could achieve the same semantic meaning with decorator as with require
tag
but nobody will know or find out.
99.9% will end up with import 'some.css'
anyway just because there are 100% more examples like this not specific to Aurelia
well, actually, i just checked if that would be possible. so, there would be some demand
edit1: as well neither
$view= `<template>
<require from='./xy.css'></require>
...
nor
@inlineView(`<template>
<require from='./xy.css'></require>
...
works 😒
edit2: ah, something like that i'd like to 'scoped' styles https://github.com/vuejs/vue-loader
I am closing this as there is no "feature" to add here. I don't want to add magic and complexity inside the plugin, there's enough already.
Basically, this is about configuring your CSS loaders properly. It's explained in details here: https://github.com/aurelia/webpack-plugin/wiki/CSS-doesn't-load
Note that if you use the suggested config:
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
issuer: /\.html?$/i
},
{
test: /\.css$/i,
loader: ['style-loader', 'css-loader'],
issuer: /\.[tj]s$/i
}
]
Then it won't work because when the issuer is .js
then style-loader
is applied.
This is meant to make this code work:
import "style.css";
export class VM {}
But if you use
@viewResources(PLATFORM.moduleName("style.css"))
export class VM { }
Then Aurelia is loading your CSS, even though it is references in a .js
, and it expects plain CSS text, not a style-loader
module.
Webpack provides many tools to control which loaders are applied in different situations. You need to play with that so that CSS loaders are applied in a way that matches how you use them.
For example, if you never import CSS directly and always go through Aurelia (either with <require>
in view or @viewResources
in js) you can just go with:
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
},
]
This simple config will work for the code by OP.
If you have CSS imports in your node_modules
(rather uncommon), you may want to apply different rules based on path.
At the moment, doing the following is not working
This is for https://github.com/aurelia/templating/issues/581