search

electron-userland / electron-compile

DEPRECATED: Electron supporting package to compile JS and CSS in Electron applications
1.01k stars 99 forks source link

import of .less files in components #225

Closed ChriD closed 7 years ago

ChriD commented 7 years ago

Hi, Is it possible to import a .less file within a component, so that the imported styles get unique id's by the compiler? I have tried and i am getting an error when importing a .less file

import styles from './test.less';

 Uncaught SyntaxError: Unexpected token .
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.require.extensions.(anonymous function) [as .less]

test.less:

.test{
  background-color: blue;
}

importing the file in html via <link> works I have to admit i am new to electron. It may be that i am making silly mistakes

mdrx-io commented 7 years ago

I'm interested in this too, but with just regular CSS.

I'm looking into https://www.npmjs.com/package/babel-plugin-css-modules-transform (which I acknowledge their disclaimer that it is experimental), but can't seem to get it to work.

anaisbetts commented 7 years ago

Node's module system only imports JS, importing CSS via an import statement is a weird Webpack hack. Using the link tag is the way to do it in electron-compile (if you need to do it at runtime, create a link tag via document.createElement, then append it to head)