Skip to content
to-string loader for webpack
Branch: master
Clone or download
gajus Merge pull request #8 from SeerUK/master
Stringify with loader-utils, call toString if necessary
Latest commit eddaf10 Sep 18, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fixed an issue where some paths would not be resolved correctly for o… Sep 18, 2016
README.md Initial release. Jul 17, 2015
package.json

README.md

to-string loader for webpack

Usage

let output = require('to-string!css!sass!./my.scss');
// => returns sass rendered to CSS a string

Don't forget to polyfill require if you want to use it in node.

See webpack documentation.

Use Case

If you setup a SASS loader:

{
    test: /\.scss$/,
    loaders: [
        'css',
        'sass'
    ]
},

then require('./my.scss') will return an Array object:

0: Array[3]
    0: 223
    1: "html,↵body,↵ol,↵ul,↵li,↵p { margin: 0; padding: 0; }↵"
    2: ""
    length: 3
i: (modules, mediaQuery) { .. }
length: 1
toString: toString()

In some cases (e.g. Angular2 @View styles definition) you need to have style as a string.

You can cast the require output to a string, e.g.

@View({
    directives: [RouterOutlet, RouterLink],
    template: require('./app.html'),
    styles: [
        require('./app.scss').toString()
    ]
})

or you can use to-string loader that will do that for you:

{
    test: /\.scss$/,
    loaders: [
        'to-string',
        'css',
        'sass'
    ]
},
You can’t perform that action at this time.