Skip to content

Commit

Permalink
Showing 2 changed files with 86 additions and 0 deletions.
43 changes: 43 additions & 0 deletions packages/xarc-create-app/template/README.md
Original file line number Diff line number Diff line change
@@ -36,6 +36,49 @@ npm run dev

7. Contribute to the [Electrode Platform](https://github.com/electrode-io/electrode/blob/master/CONTRIBUTING.md).

## Styling Support

To enable extra CSS styling processing, install these optional npm packages.

| module | note |
| ------------------- | ---------------------------------------------------------------- |
| `@xarc/opt-postcss` | This is the base styling processing using PostCSS. Always needed |
| `@xarc/opt-stylus` | Install if you want to use `.styl` files |
| `@xarc/opt-less` | Install if you want to use `.less` files |
| `@xarc/opt-sass` | Install if you want to use `.sass` or `.scss` files |

For example, to support `.styl` files:

`npm i --save-dev @xarc/opt-postcss @xarc/opt-stylus`

And you can just add code to your files that imports style files:

`import from "my-styles.css"`

### CSS Module Support

By default, CSS module is only enabled for `.css` files with name that ends with `.mod.css` or `.module.css`. ie: `my-styles.mod.css`

And you can use CSS modules like this:

```tsx
import styles from "my-styles.mod.css";

export const demoComponent = () => <p className={styles.someStyle}>hello</p>;
```

If you want to enable CSS module support for other files, like `my-styles.mod.styl`,
then set options when calling `loadDevTasks` in `xrun-tasks.ts`:

```ts
loadDevTasks(xrun, {
// options to customize features
webpackOptions: {
cssModuleSupport: "byModExt"
}
});
```

## Resources

- Check Electrode docs at <https://www.electrode.io/electrode/>
43 changes: 43 additions & 0 deletions samples/create-app-demo/README.md
Original file line number Diff line number Diff line change
@@ -36,6 +36,49 @@ npm run dev

7. Contribute to the [Electrode Platform](https://github.com/electrode-io/electrode/blob/master/CONTRIBUTING.md).

## Styling Support

To enable extra CSS styling processing, install these optional npm packages.

| module | note |
| ------------------- | ---------------------------------------------------------------- |
| `@xarc/opt-postcss` | This is the base styling processing using PostCSS. Always needed |
| `@xarc/opt-stylus` | Install if you want to use `.styl` files |
| `@xarc/opt-less` | Install if you want to use `.less` files |
| `@xarc/opt-sass` | Install if you want to use `.sass` or `.scss` files |

For example, to support `.styl` files:

`npm i --save-dev @xarc/opt-postcss @xarc/opt-stylus`

And you can just add code to your files that imports style files:

`import from "my-styles.css"`

### CSS Module Support

By default, CSS module is only enabled for `.css` files with name that ends with `.mod.css` or `.module.css`. ie: `my-styles.mod.css`

And you can use CSS modules like this:

```tsx
import styles from "my-styles.mod.css";

export const demoComponent = () => <p className={styles.someStyle}>hello</p>;
```

If you want to enable CSS module support for other files, like `my-styles.mod.styl`,
then set options when calling `loadDevTasks` in `xrun-tasks.ts`:

```ts
loadDevTasks(xrun, {
// options to customize features
webpackOptions: {
cssModuleSupport: "byModExt"
}
});
```

## Resources

- Check Electrode docs at <https://www.electrode.io/electrode/>

0 comments on commit f167882

Please sign in to comment.