Develop Reference

sass-loader on webpack in Asp.Net Core

I need help in connecting the style loader scss-loader
i try include sass-loader in webpack.config.js for
vue-component:
#import '#/styles/mixin.scss';
webpack.config.js:
....
{
test: /\.scss$/,
exclude: /(node_modules)/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
....
but have all times error
Error: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
File to import not found or unreadable: src/styles/mixin.scss.
Any ideas how to cure this?

in vue component imports module have path 'src/name.scss' change it and loader works

Enabling CSS Modules from css-loader disallows importing node_modules CSS

I have a CSS Modules rule on webpack
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
}
Enabling modules modules=true gives me the following error:
ERROR in ./node_modules/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./src/global.css
Module not found: Error: Can't resolve '~/antd/dist/antd.css' in '[REDACTED]'
# ./node_modules/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./src/global.css 3:10-141
# ./src/global.css
# ./src/entry.jsx
This happens at the CSS line
#import '~/antd/dist/antd.css';
antd is a dependency that is in node_modules.
However, removing modules=true from the loader seems to generate no error from this import line.
I need CSS modules and I need to import this CSS. How can I fix this?

You can stop css-loader to interpret #import statements by setting your config as follows
{
test: /\.css$/,
use: [
{
loader:'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
import: false
}
}
]
}

Unfortunately, this is a known issue with CSS-loader. #imports don't work properly when modules are enabled.
There is an ugly solution for this, but a solution nonetheless.
What I did is I replaced the rule with this:
{
test: /^((?!\.module).)*css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
}
]
},
{
test: /\.module.css$/,
loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
},
CSS files that require #import like in my case above, will now work, however these files cannot be imported in javascript as a CSS module.
CSS files that should be modular must be end with the file extension .module.css for CSS modules to work.

webpack how to run babel-loader on files outside the project directory?

I am using webpack2, babel-loader
import something from '../../customPackageOutsideProjectDirectory';
the above line of code gives the following error:
Module build failed: Error: Parse Error: Line 1: Illegal import declaration
at throwError (/Users/sahilsharma/workspace/projectTry/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
The error is probably because of lack of .babelrc file outside the project directory.
How to get this package loaded correctly from outside ?

The .babelrc file isn't necessary if you config Babel in webpack using the options:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
https://github.com/babel/babel-loader

Error: Cannot resolve module 'style-loader'

I'm using style-loader with webpack and react framework. When I run webpack in terminal i'm getting Module not found: Error: Cannot resolve module 'style-loader' in import.js file although i've specified the file path correctly.
import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';
webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');
module.exports = {
entry: [
// Set up an ES6-ish environment
'babel-polyfill',
// Add your application's scripts below
APP_DIR + '/import.js'
],
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
],
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
}
};

Try run script below:
npm install style-loader --save
Modify webpack config, add modulesDirectories field in resolve.
resolve: {
extensions: ['', '.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
}

Please run this script:
npm install style-loader css-loader --save
Set your module as below:
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: path.join(_dirname, 'app')
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
}
It's basically reading as for loaders - test jsx using babel-loader and the next test is a css file using style-loader and css-loader, which will recognize the modules. Also, you should exit out of npm start, and run "npm install" and run "npm start". Hopefully, this should take care of the issue.

If you try to import a css file with this line:
import '../css/style.css';
and have added the style-loader in your webpack config.
The error states:
Module not found: Error: Cannot resolve module 'style-loader'
the module named "style-loader" is not resolved.
You need to install that module with:
$ npm install style-loader --save-dev
Or, if you're using yarn:
$ yarn add style-loader -D
Then run webpack again.

I wanted to add on to what David Guan said. In the newer versions of Webpack (V2+) moduleDirectories has been replaced with modules. The updated resolve portion of his answer would look like this:
resolve: {
extensions: ['.js', '.jsx', '.css'], //An empty string is no longer required.
modules: [
'node_modules'
]
}
For more information you can check out their official documentation. Hope this helps someone out there.

Under Webpack 3, with node_module in a non-standard location, I had to use both resolve and resolveLoader configuration objects:
resolve: {
modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
modules: ["build-resource/js/node_modules"]
},

I use Windows and did everything but nothing worked. It appeared console didn't have enough permissions. So, after running in Admin mode I re-entered
npm install
and everything worked. You can see the result by appearing a lot of modules in node_modules directory.

If you're node_modules are on the same dir as your webpack config file you can simply add context: __dirname.
module.exports = {
context: __dirname,
entry: [
...
(works in both webpack 1 and 2)

remove 'style-loader!css-loader', make it ['style-loader','css-loader']
remove empty string '' from extensions array. It will be look like bellow
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
]
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
},

it is very simple you have to install the fist syle-loader the css-loader.

Example of how to load static CSS files from node_modules using webpack?

I don't know how to load with webpack any CSS from node_modules libs, for example I've installed leaflet and each attempt of load leaflet/dist/leaflet.css fails.
Could you provide example how to load static styles from node_modules?
My current webpack config below. Additionaly I'm using extract-text-webpack-plugin and sass-loader my project scss files are working well, I have also css-loader, have I to resolve static css files or add something to stylePathResolves?
//require('leaflet/dist/leaflet.css');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var path = require('path');
var stylePathResolves = (
'includePaths[]=' + path.resolve('./') + '&' +
'includePaths[]=' + path.resolve('./node_modules')
)
module.exports = {
entry: ".js/app.js",
output: {
path: "./static/js",
filename: "app.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style',
'css' + '!sass?outputStyle=expanded&' + stylePathResolves
)
}
]
},
plugins: [new ExtractTextPlugin("app.css")]
};
Where to load leaflet.css, commented out require('leaflet/dist/leaflet.css') gives me following error:
home/myproj/node_modules/leaflet/dist/leaflet.css:3
.leaflet-map-pane,
^
SyntaxError: Unexpected token .

For users who have encountered a similar problem, there are steps that I've done to get it working, I'm not sure that this equilibrium way.
npm install file-loader --save
add import 'leaflet/dist/leaflet.css'; in main app.js
change webpack.config.js by following way:
add css-loader to get rid of SyntaxError: Unexpected token . and next add file-loader and match files to get rid of Uncaught Error: Cannot find module "./images/layers.png":
module.exports = {
entry: "./web/static/js/app.js",
output: {
path: "./priv/static/js",
filename: "app.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style',
'css' + '!sass?outputStyle=expanded&' + stylePathResolves
)
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
}]
},
plugins: [new ExtractTextPlugin("app.css")]
};
At the beginning I got this config from some example and it's not 100% clear why I've used ExtractTextPlugin to load scss and what the correlation is with css-loader, maybe to be more coherent should I use ExtractTextPlugin also in this part, maybe someone knows and can code review? But my solution is working and I can work further.

I had to do:
npm install --save-dev style-loader css-loader file-loader
If I didn't configure the file loader for the images, I got:
ERROR in ./node_modules/leaflet/dist/images/layers-2x.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:8888-8921
# ./node_modules/leaflet/dist/leaflet.css
# ./src/view/component/RouteMap.js
# ./src/index.js
ERROR in ./node_modules/leaflet/dist/images/layers.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:8716-8746
# ./node_modules/leaflet/dist/leaflet.css
# ./src/view/component/RouteMap.js
# ./src/index.js
ERROR in ./node_modules/leaflet/dist/images/marker-icon.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:9975-10010
# ./node_modules/leaflet/dist/leaflet.css
# ./src/view/component/RouteMap.js
# ./src/index.js
You also MUST import the CSS file in your index.js or main.js (or whatever your main JS file is called). Otherwise, you get an error saying that module.exports is read-only.
import 'leaflet/dist/leaflet.css';
A more updated webpack.config.js snippet is:
{
...
module: {
rules: [
{ test: /\.css$/, use: ["style-loader","css-loader"] },
{ test: /\.(png|svg|jpe?g|gif|woff2?|ttf|eot)$/, use: [ 'file-loader' ] },
],
},