@greenwood/plugin-import-css v0.29.3
@greenwood/plugin-import-css
Overview
A Greenwood plugin to allow you use ESM (import
) syntax to load your CSS.
This package assumes you already have
@greenwood/cli
installed.
Installation
You can use your favorite JavaScript package manager to install this package.
examples:
# npm
npm install @greenwood/plugin-import-css --save-dev
# yarn
yarn add @greenwood/plugin-import-css --dev
Usage
Add this plugin to your greenwood.config.js and spread the export
.
import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
export default {
// ...
plugins: [
greenwoodPluginImportCss()
]
}
This will then allow you to use import
to include CSS in your JavaScript files.
import css from '../path/to/styles.css'; // must be a relative path per ESM spec
console.log(css); // h1 { color: red }
A couple notes:
- For SSR and
prerender
use cases, follow these steps - For client side / browser code specifically, it is recommended to append
?type=css
, e.g.import css from '../path/to/styles.css?type=css';
For libraries like Material Web Components, this plugin will resolve references to some-file.css if the equivalent exists that ends in .js (e.g. styles.css.js).
The plan is to coalesce around import assertions in time for the v1.0 release so the same standard syntax can be used on the client and the server.
PostCSS
If you plan to use PostCSS, then it is recommended to use our PostCSS plugin and make sure plugin-postcss comes before this plugin in your greenwood.config.js.
import { greenwoodPluginPostcss } from '@greenwood/plugin-postcss';
import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
export default {
// ...
plugins: [
greenwoodPluginPostcss(),
greenwoodPluginImportCss()
]
}
5 days ago
2 months ago
2 months ago
4 months ago
5 months ago
6 months ago
10 months ago
8 months ago
7 months ago
9 months ago
9 months ago
6 months ago
9 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago