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
Related
I am building an Electron app in Angular and I am upgrading a couple of dependencies to the latest versions.
✅ Electron stays on v19
✅ Tailwindcss v3.1.8
⬆️ Angular v11 to v14
⬆️ Webpack v4.46.0 to v5.74.0
ℹ️ The entire project compiled before successfully.
I am using the monaco-editor and since bumping the deps above I am running into an issue during the bundling stage of webpack.
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) /.../projects/foo/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word
1 |
> 2 | import API from "!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../../style-loader/dist/runtime/insertBySelector.js";
Before bumping the versions the webpack.config.json only contained a rule for /\.scss$/! But suddenly with webpack v5 it failed that it is unable to understand some css files (famous error: You may need an appropriate loader to handle this file type).
So I assumed a rule for CSS was missing. I added the rule and my webpack file now looks like this:
{
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
"postcss-loader"
],
},
{
test: /\.scss$/,
use: [
'postcss-loader',
{
loader: 'sass-loader',
options: {
implementation: sassImplementation,
},
},
],
},
],
},
}
Please note the order "style-loader", "css-loader", 'postcss-loader' that has been reported as the correct one in posts like here and here. I still receive the error above.
Can anyone point out if my webpack is misconfigured or if I missed a rule?
why note combine the tests? no need to have two different since the sass loader will convert it to css.
{
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
{
loader: 'sass-loader',
options: {
implementation: sassImplementation,
},
},
],
},
],
},
}
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.
Hello I'm trying to load bootstrap css through webpack style-loader in my vue2js SPA.
I installed style loader with npm install --save-dev css-loader and I've got it in devDependiecies of package.json. I also added following to my webpack.conf.js:
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
Then I installed bootstrap css throught
npm install bootstrap#4.0.0-beta.3
And last thing I did is import bootstrap css in main.js
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
I also tried like this:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
and like this:
import './../node_modules/bootstrap/dist/css/bootstrap.css'
import './../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
This doesn't work giving me this error in command line(AFTER SERVER START):
ERROR in ./src/main.js
Module not found: Error: Can't resolve '../node_modules/bootstrap-vue/dist/bootstrap-vue.css' in 'C:\Users\Adm\Documents\TheStockerTrader\src'
# ./src/main.js 7:0-62
# multi main
ERROR in ./src/main.js
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\Adm\Documents\TheStockerTrader'
# ./src/main.js 6:0-58
# multi main
And this errors in chrome console:
resolve 'bootstrap-vue/dist/bootstrap-vue.css' in 'C:\Users\Adm\Documents\TheStockerTrader\src'
Parsed request is a module
using description file: C:\Users\Adm\Documents\TheStockerTrader\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
Module not found: Error: Can't resolve '../node_modules/bootstrap-vue/dist/bootstrap-vue.css' in 'C:\Users\Adm\Documents\TheStockerTrader\src'
What I'm doing wrong, why my css-loader doesn't work? It says that it can't find bs module but I'm sure I installed it, I also checked if it is present in my node_modules folder and it is:
Did you install style loader as well:
npm install style-loader --save-dev
Then set as a loader:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Try this
module : {
rules : [
...
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
},
// // css global which not include in components
{
test: /\.css$/,
exclude: path.join(__dirname, '/src/app'),
use: ExtractTextPlugin.extract({
use: 'raw-loader'
})
},
]...
}
plugin : [
...
new ExtractTextPlugin(
'[name].css'
),
]
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
I'm developping a chrome extension. I use boostrap 3 for the UI.
doctype html
html
head
meta(charset='UTF-8')
title (Boilerplate Popup)
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css")
style.
body { width: 500px; }
body
#root
script(src=env == 'prod' ? '/js/ext.bundle.js' : 'http://localhost:3000/js/ext.bundle.js')
Here is how I was used to include boostrap.
localhost:3000 is a server created with webpack web server.
At this point everything works well and here is a screenshot :
But I don't want my chrome extension to be network dependant, so I decided to download boostrap using :
npm install boostrap which have downloaded boostrap 3.
I also decided to use webpack to load boostrap.min.css.
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react-hmre']
}
}, {
test: /\.css$/,
loaders: [
'style',
'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss'
]
},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}]
}
I didn't change the css loader (which comes from a boilerplate) but I added the loader for the web font and svg.
Finally, I've included boostrap.min.css in the javascript entry point :
import 'bootstrap/dist/css/bootstrap.min.css';
Now, it's how my extension look like :
I think a part of boostrap is loaded (because the link in the second version looks like the same as the links in the first version. But obviously, the other components are not loaded.
I also use react-boostrap.
Thanks
My idea in the comments is right, css?module locally load boostrap. I changed the import with :
import '!style!css!bootstrap/dist/css/bootstrap.min.css';
and it works
For WEBPACK 2, (i.e. after all the necessary dependency installs) you can include bootstrap as follows:-
Add css loaders in webpack.config.js
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
}
]
}
Then, import bootstrap in the entry point script (i.e index.js or app.js, index.js in my project)
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
Need details!!! More details here
npm install bootstrap ;
And :
Adjust css loader as following :
{
test: /\.css$/,
loaders: ['style', 'css'],
}
And, import bootstrap :
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';