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.
Related
I've been using Webpack and have found it great for bundling, polyfilling and all sorts of other functions for Javascript, however I wondered if there was a known loader / NPM script that automatically compiles designated .scss files into one.
I have previously used the sass-loader, extract-css plugin to take SCSS out of components and bundle them into the final dist file which is fine for web apps. However, a lot of my day to day work is spent working on traditional websites, so it's often not generated via components / modules.
What I'm looking for, is anytime I save an .scss file, if this is included within my entry points / rules, it automatically compiles all .scss files into a dist/styles.css sheet.
I've had a look online and Gulp seems to offer this, but it looks like Webpack already does 90% of what Gulp offers so ideally would want to keep this all in Webpack.
Thanks in advance
import the scss file on your entry point like this import './style.scss';.
Install mini-css-extract-plugin.
Then add this to your webpack config
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [
{
test: /\.(sc|c)ss$/,
use: [
// { loader: 'style-loader' },
{
loader: MiniCssExtractPlugin.loader, // extract css to a single file
options: {
publicPath: '../',
hmr: false
}
},
{
loader: 'css-loader', options: {
sourceMap: false
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
plugins: [
require('autoprefixer')
]
}
},
{
loader: 'sass-loader', options: { sourceMap: false }
}
],
exclude: /node_modules/
}
],
},
I`m trying to paste a CSS Code into a JS File using webpack
My flux is the following
SASS file > CSS content > PostCSS > css file
{
test: /\.(sass|scss)$/,
exclude: /node_modules/,
use: [
MiniCSSExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
outputStyle: 'compressed'
}
}
}
]
}
But the MiniCSSExtractPlugin gets me the content into a css file.
I'm use Lit Element so the styles should be declare with css function part of lit-element on the following way
import {css} from 'lit-element';
export default css`
:host {
display: inline;
}
`;
Is there any way to generate css code as a string and paste it into js file?
To import a CSS file into JS (w/webpack) you need to configure webpack with the following loaders:
css-loader
style-loader
Both available with NPM:
$ npm i css-loader style-loader --save-dev
And add this entry to the module.rules array in your webpack configuration:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
The result
Both of this loaders correctly configured will allow you to do the following sentence in JavaScript:
import myStyles from './your-css-file.css';
And then, you can just paste them into literal templates as follows:
static get styles() {
return css`${myStyles}`;
}
Additionally:
With a deep knowledge into what you might be talking about, you might need to take a look around #cells/cells-cli files and add those loaders into webpack configuration. Otherwise, you may need to create a webpack.config.js file in every lit-element component, which might not be the best for the current architecture.
Nice to see you around here, ¡saludos!;)
#k3llydev, I tried your suggestion and couldn't get it to work. Do you have any suggestions, specifically when you say "both of these loaders correctly configured will allow you to do the following"? I'd like to be able to import the CSS and then use it directly in the styles getter like you show in your example, but I had to do this as a workaround:
import MyImportedStyle from './some.css';
static get styles () {
return [
css`${unsafeCSS(MyImportedStyle.toString())}`
];
}
While using the 'to-string-loader' in webpack:
{
test: /\.css$/i,
use: ['to-string-loader', 'css-loader'],
}
This worked out for me and did what I wanted, but if I could avoid using the to-string-loader and could use the imported object directly, that would be idea. Any suggestions?
This way should do what the original poster asked for, a way to get the CSS as a string and use it in your LitElement.
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
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 this library for slideshows called Flickity that requires to use its css file flickity.min.css. In my project I use postCSS and when including this flickity.min.css into my components css like:
#import ./lib/flickity.min
its classes get prefixed in the following way: MyComponent__flickity-class_35aw issue with this is that flickity creates new dom elements and relies on its classes, so in inspector the class for it would be .flickity-class hence no styles are applied to it, I'm trying to figure out how to include it correctly.
Using react + webpack setup
It looks like you're importing the CSS as CSS Modules. If you didn't intend to use CSS Modules you just need to remove 'modules' from your webpack config, i.e.
loaders: [
{
test: /\.css$/,
loaders: 'style!css?modules'
}
]
Should just become:
loaders: [
{
test: /\.css$/,
loaders: 'style!css'
}
]
If however you want to use CSS modules for some files but not others I would recommend defining multiple CSS loader configs based on an appropriate heuristic, e.g. assuming your /lib/ directory will only ever contain 'global' CSS you could do this:
loaders: [
{
test: /\.css$/,
exclude: /lib/,
loaders: 'style!css?modules'
},
{
test: /\.css$/,
include: /lib/,
loaders: 'style!css'
}
]