Addons

CSS Sass Transpiler

WinnetouJs believes in the strength of sass, so it already brings with it an onboard SASS transpiler. But that doesn't make you obliged to use sass, css can be used normally.

You can separate your project into several sass (or css) files so that the transpiler will bring them all together in a single bundle ./release/winnetouBundle.min.css.

Setting up

You must use win.config.js to configure the input folders for the .scss and .css files and the output folders for the transpiled version. The sass parameter is an array of objects that can contain the following properties: entryFolder, outFolder and firstFile. Use firstFile to determine a sass file to be transpiled before the rest of the folder.

win.config.js



...
sass: [
  {
      entryFolder: "./sass",
      outFolder: "./release",
      firstFile:'base.scss'
  },
  {
      entryFolder: "./sass_mobile",
      outFolder: "./release_mobile",
      firstFile:'base.scss'
  },
],
...

Transpiling

To transpile your sass into css, just run node wbr --bundleRelease in your terminal. Then, import the generated min.css into your html.

index.html



  ...
    
  <link rel="stylesheet" href="/release/winnetouBundle.min.css" />
</head>
<body>
  ...
  <script src="/release/winnetouBundle.min.js"></script>
</body>

Remember, WinnetouJs will never mix html, css and javascript codes together.