load StyleSheets as JS-Objects (webpack-loader)
stable version with webpack 4 compatibility
npm install @stackr23/styleobjects-loader --save-dev
your.csso
.test23
font-size 23px
.testInner
font-decoration none
your.js
import styleobject from '@stackr23/styleobjects-loader!stylus-loader!./your.csso'
styleobject
{
test23: {
'fontSize': '23px',
testInner: {'fontDecoration': 'none'}
}
for ES6/7 usage, define loaders in the webpack config
// webpack.config.js
module: {rules: [...yourLoaders, {
test: /\.(csso)$/,
use: ['@stackr23/styleobjects-loader', 'stylus-loader']
}]}
// yourComponent.js
import yourStyleObject from '/styles/your.csso'
for other style preprocessor syntax (less, sass, scss, ...) just add the realated loader (the loader has to output css!)
let style = require('@stackr23/styleobjects-loader!sass-loader!./your.sass');
for pure css just use
let style = require('@stackr23/styleobjects-loader!./your.css');
- stackr23/styleobjects#3
- handle loader options
- ES6 (/dist + buildScript)
- for objectformat and enhanced usage go to styleobjects
- webpack/loader related issues or PR's are welcome