Add example for less loader about react-boilerplate HOT 7 CLOSED

Hi,

How would that work out? I don't plan on using less on this boilerplate.

I have a less specific example here, though.

from react-boilerplate.

Hi,

Sorry I am just very new to this whole webpack thing.

What I am trying to do is load .less files into my webpack but currently it doesn't want to work.

parts.js: https://x.zeta.pm/omovewejonunayaz.js
webpack.config.js: https://x.zeta.pm/yedetohucokedayo.js

And my app's structure is as follows.

❯ tree app
app
├── index.jsx
└── style
    ├── file-icons
    │   ├── colors.less
    │   ├── file-icons.less
    │   ├── fonts
    │   │   ├── devicons.woff2
    │   │   ├── file-icons-v1.7.9.woff2
    │   │   ├── fontawesome.woff2
    │   │   ├── icomoon.woff2
    │   │   └── mfizz.woff2
    │   ├── fonts.less
    │   ├── icons.less
    │   └── items.less
    └── main.less

But when I try to build the webpack the build doesn't contain styles.css

from react-boilerplate.

Instead of preLoaders you might want to use loaders for loadLESS. You could also try changing style: PATHS.style, entry to point directly to main.less. Idea: style: path.join(PATHS.style, 'main.less'),. That's likely the reason why the styles aren't getting picked up.

If this doesn't work, set up a GitHub repository for me to study.

from react-boilerplate.

ERROR in ./app/style/main.less
Module build failed: Unrecognised input
 @ /home/zeta/PycharmProjects/stash/stash/frontend/app/style/main.less (line 4, column 12)
 near lines:
   // load the styles
   var content = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/less-loader/index.js!./main.less");
   if(typeof content === 'string') content = [[module.id, content, '']];

Is what I am getting now, that said I have setup a repo for it now... I have to note that it's not a fork because it goes into my main application thus I had to manually clone it.
https://github.com/ZetaHunter/stash

from react-boilerplate.

The loader definition isn't picking it up for some reason. Make sure you
modify just the entry, not the general style path.

I am going to need something to run to tell any better.

On Sun, 8 May 2016 14:22 Aleksandr Tihomirov, [email protected]
wrote:

ERROR in ./app/style/main.less
Module build failed: Unrecognised input
@ /home/zeta/PycharmProjects/stash/stash/frontend/app/style/main.less (line 4, column 12)
near lines:
// load the styles
var content = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/less-loader/index.js!./main.less");
if(typeof content === 'string') content = [[module.id, content, '']];

Is what I am getting now, that said I have setup a repo for it now... I
have to note that it's not a fork because it goes into my main application
thus I had to manually clone it.
https://github.com/ZetaHunter/stash

—
You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#1 (comment)

from react-boilerplate.

Somehow I ended up fixing the solution.

exports.loadAssets = function(include) {
    return {
        module: {
            loaders: [
                {test: /\.json/, loader: 'json-loader'},
                {test: /\.less$/, loader: ExtractTextPlugin.extract(
                    'style', 'css?sourceMap!postcss!less?sourceMap')},
                {test: /\.png$/,  loader: "url?limit=10000&mimetype=image/png"},
                {test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000"},
                {test: /\.ttf$/,  loader: "url?limit=10000&mimetype=application/octet-stream"},
                {test: /\.eot$/,  loader: "file"},
                {test: /\.svg$/,  loader: "url?limit=10000&mimetype=image/svg+xml"}
            ]
        },
        postcss: function () {
            return [precss, autoprefixer];
        },
        plugins: [
            // Output extracted CSS to a file
            new ExtractTextPlugin('styles.css')
        ]
    }
};

I will close this issue now. Thank you for your help @bebraw 👍

from react-boilerplate.

Great to hear you got it. 👍

from react-boilerplate.