Skip to content

Instantly share code, notes, and snippets.

@jouni-kantola
Last active January 3, 2017 20:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jouni-kantola/9a3466d900f78a3d7d81f571f76ce55e to your computer and use it in GitHub Desktop.
Save jouni-kantola/9a3466d900f78a3d7d81f571f76ce55e to your computer and use it in GitHub Desktop.
// works in both v1 and v2
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
// works in v2
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
// does not work in v2 (results in: Module not found: Error: Can't resolve 'style-loader!css-loader!less-loader')
{
test: /\.less$/,
use: {
loader: "style-loader!css-loader!less-loader"
}
}
// doesn't work in v2 (results in: Module not found: Error: Can't resolve 'style!css!less')
{
test: /\.less$/,
use: "style!css!less"
}
// doesn't work in v2 (results in: Module not found: Error: Can't resolve 'style-loader!css-loader!less-loader')
{
test: /\.less$/,
use: "style-loader!css-loader!less-loader"
}
// doesn't work in v2 (results in: Module not found: Error: Can't resolve 'style!css!less')
{
test: /\.less$/,
use: {
loader: "style!css!less"
}
}
@TheLarkInn
Copy link

{
  test: /\.less$/,
  use: {
    loader: "style-loader!css-loader!less-loader"
  }
}

needs to be changed to

{
  test: /\.less$/,
  use: "style-loader!css-loader!less-loader"
}

Also the rest don't work because webpack latest requires explicit loader name resolution. So instead of babel you must specify babel-loader.

@jouni-kantola
Copy link
Author

jouni-kantola commented Jan 3, 2017

@TheLarkInn: One of the examples I had in the gist was the exact example you gave. I tried again, once more copy/pasting your code, and build doesn't work. Exception thrown, when importing a .less file is: Module not found: Error: Can't resolve 'style-loader!css-loader!less-loader'

The configs that do work are either:

// legacy style
{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader"
}

// chain via array of loader names
{
  test: /\.less$/,
  use: [
    'style-loader',
    'css-loader',
    'less-loader'
  ]
}

// chain via array of loader names and objects
{
  test: /\.less$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { importLoaders: 1 } },
    'less-loader'
  ]
}

Do you want me to create an issue about this, if ! chaining should work? I'm using webpack@v2.2.0-rc.3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment