Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Passing in loader data? #77

Closed
soluml opened this issue Aug 6, 2015 · 9 comments
Closed

Passing in loader data? #77

soluml opened this issue Aug 6, 2015 · 9 comments

Comments

@soluml
Copy link

soluml commented Aug 6, 2015

So, I'm fairly new to Webpack, so hopefully this is a good place to ask this.

This request is sort of related to #10, but instead of passing in loader data directly I was hoping to pass it in as a property that can be accessed from the template. I was hoping to pass in my localized styles from css-loader. Something like this:

webpack.config:

new HtmlWebpackPlugin({
    styles: require('style-loader!css-loader?localIdentName=[local]__[hash:base64:5]!autoprefixer-loader?{browsers:["last 2 version", "ie 9"]}!sass-loader!src/scss/main/s.scss'),
    filename: 'main.handlebars',
    template: 'src/tmpl/main.html'
})

main.html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title>Title</title>
    </head>
    <body class="{%= o.htmlWebpackPlugin.options.styles.bodyClass %}">
    </body>
</html>

Unfortunately, I can't seem to find a configuration that allows me to process a loader in the config. Is this possible?

Thanks!
@jantimon
Copy link
Owner

jantimon commented Aug 6, 2015

You should set inject:trueand move the require to your js file

@soluml
Copy link
Author

soluml commented Aug 6, 2015

Thanks for the quick reply. Unless I'm missing something, seems like inject: true just sticks the style/script tags into the template, but that's not what I'm after.

When I require a CSS file in a JS file var styles = require('../../scss/main/s.scss');, I'm given an object keyed by the original class names with the obfuscated names as the values:

{
   "bodyClass": "bodyClass__a7asj"
 }

I've already required the css file in my JS, so I can use it in all my JS stuff, but I can't seem to find a way to pass this object to my templates. Am I making sense?

@jantimon
Copy link
Owner

jantimon commented Aug 6, 2015

This isn't possible right now - you have to generate the html using a javascript template language for that

@jantimon
Copy link
Owner

jantimon commented Aug 6, 2015

e.g. EJS or React

@soluml
Copy link
Author

soluml commented Aug 6, 2015

Thanks, I was afraid of that. I was trying to take these templates than pass them over to Node.js for rendering on the server with React. Guess that's not going to work :/

@soluml soluml closed this as completed Aug 6, 2015
@jantimon
Copy link
Owner

jantimon commented Aug 6, 2015

You still can render webpack content on the server - but this plugin provides only a index.html not a templating solution

@soluml
Copy link
Author

soluml commented Aug 6, 2015

I tried something like this in Node running Express: var styles = require('css-loader?localIdentName=[local]__[hash:base64:5]!autoprefixer-loader?{browsers:["last 2 version", "ie 9"]}!sass-loader!src/scss/main/s.scss')

All I got was errors and all the loaders were definitely present in my package.json file as I'm able to use them in webpack for my front-end JS. Am I completely missing something? I've poured over Webpack docs and Stackoverflow and I'm just not finding many examples.

@jantimon
Copy link
Owner

jantimon commented Aug 7, 2015

Compile your javascript for http://webpack.github.io/docs/configuration.html#output-librarytarget umd and require the result from node.

@lock
Copy link

lock bot commented Jun 1, 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Jun 1, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@soluml @jantimon