tompascall / js-to-styles-var-loader Goto Github PK

Hi,

Thanks for building this awesome project!

I am trying to load vars from an npm package (in /node_modules). This doesn't seem to be possible though.

Here are some things I tried:

• require('@nulogy/tokens');;
• require('@nulogy/tokens/index.js');;
• require('~@nulogy/tokens'); and require('~@nulogy/tokens/index.js'); – using the ~ prefix from the less-loader webpack resolver syntax.
• require('../../../node_modules/@nulogy/tokens/');
• require('../../../node_modules/@nulogy/tokens/index.js');

I leven tried to set my node_modules folders (I am using yarn workspaces so I have two) in less_loader:

 { 
  loader: 'less-loader', 
    options: {
      paths: [
        path.resolve('node_modules'),
        path.resolve('../node_modules')
       ]
    } 
},

In all cases I got an error:

ERROR in ../node_modules/css-loader!../node_modules/less-loader/dist/cjs.js!../node_modules/js-to-styles-var-loader!./src/cssPreprocessorResearch/less.less
Module build failed: 


require('@nulogy/tokens');
^
Function 'require' is undefined
      in /Users/user/src/nulogy/design-system/sandbox/src/cssPreprocessorResearch/less.less (line 13, column 0)
 @ ./src/cssPreprocessorResearch/less.less 2:14-181 21:1-42:3 22:19-186
 @ ./src/cssPreprocessorResearch/less.story.js
 @ ./src \.story.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ../node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

You can see the code on this branch: https://github.com/nulogy/design-system/tree/loading-js-vars-into-less-from-node-modules

My webpack config is here: https://github.com/nulogy/design-system/blob/loading-js-vars-into-less-from-node-modules/sandbox/.storybook/webpack.config.js

The less file is here in this folder: https://github.com/nulogy/design-system/tree/loading-js-vars-into-less-from-node-modules/sandbox/src/cssPreprocessorResearch

specifically: https://github.com/nulogy/design-system/blob/loading-js-vars-into-less-from-node-modules/sandbox/src/cssPreprocessorResearch/less.less

Hey I'm trying to use your loader in a project that is using babel-loader on the js. However, it seems that the way javascript is required through this module doesn't respect such loaders.

I've investigated using webpackContext.exec as a replacement for require, but ran into this issue webpack/webpack#667. That issue thread seems to imply that the functionality can be achieved using a child compiler.

Throws error when trying to use .sass files. Works on .scss files.

Hi seems like i can use this to theme the application , can anyone help how i can change the module.export dynamically based on api response in dims.js

const getThemeConfig = (extractLess, themeNameToPassInToLess) => { return { test: /\.(css|less)$/, use: extractLess.extract({ use: [ { loader: "css-loader", options: { importLoaders: 1 } }, 'postcss-loader', { loader: "less-loader", options: { plugins: [ lessPlugins ], globalVars: { themeName: themeNameToPassInToLess, customThemeColor: '#0000ff' } } }, { loader: "js-to-styles-var-loader" } ], fallback: "style-loader" }) }; };

I have this as my less config but then at the top of a random less file I've included:
require('../globals/colors.js');

Unfortunately I'm getting required is undefined.