Maintainable stylesheets with SCSS.
npm i rapidjs-org/plugin--scss__rjs.plugin.json
{
"package": "@plugins.rapidjs.org/scss"
}└─ /src …
└─ /scss
├─ __rjs.plugin.json
├─ /components
│ ├─ _button.scss
│ ├─ _header.scss
│ └─ _footer.scss
└─ /pages
├─ index.scss
└─ rates.scss
src/scss/pages/rates.scss
body {
h1 {
color: red;
}
}public/rates.html
<html>
<head>
<link rel="stylesheet" href="/css/rates.css">
</head>
<body>
<h1>Rates</h1>
</body>
</html>By default, the plugin works relative to the root for both the plugin directory (input), and public directory (output). Alternative relative paths can be specified via inPath and outPath, respectively.
__rjs.plugin.json
{
"package": "@plugins.rapidjs.org/scss",
"config": {
"inPath": "assets/css/",
"outPath": "pages/"
}
}The SCSS to CSS transpilation bases on flecss. To opt-in with advanced flecss framework features, provide the respective library name to
config.flecssLibrary. flecss variable overrides are then expected in/__overrides.scss.
© Thassilo Martin Schiepanski