Comments (4)
I'm using this project because I need to extract the CSS as a file to pass it to a library that requires a CSS URL.
Is there any alternative to achieve this? Seems that css-loader is generating a JS file, so I can't use it as a resource directly. And I don't think that I can use mini-css-extract-plugin for this.
Edit:
Fixed by replacing css-loader > extract-loader by simply using postcss-loader.
Yeah I was using the css-loader and extract-loader too but it seems unnessesary. Below code just works fine without css-loader and extract-loader.
const postcssPresetEnv = require('postcss-preset-env');
const sass = require('sass');
{
test: /\.(sass|scss)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].css',
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-import', postcssPresetEnv()],
},
},
},
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: sass,
sourceMap: false,
sassOptions: {
includePaths: ['node_modules', 'apps', '.'],
},
},
},
],
},
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].css',
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-import', postcssPresetEnv()],
},
},
}
],
},
from extract-loader.
I'm using this project because I need to extract the CSS as a file to pass it to a library that requires a CSS URL.
Is there any alternative to achieve this? Seems that css-loader is generating a JS file, so I can't use it as a resource directly. And I don't think that I can use mini-css-extract-plugin for this.
Edit:
Fixed by replacing css-loader > extract-loader by simply using postcss-loader.
from extract-loader.
But postcss-loader doesn't seem to process url(...) as require/import. I have to load fonts in the css. And woff2 files need to be handled.
from extract-loader.
My config is that can help people:
resourceQuery: /file/, // foo.css?file
use: [{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
postcssUrl({ url: 'inline' })
]
}
}
from extract-loader.
Related Issues (20)
- SyntaxError: unknown: Unexpected token (import) HOT 12
- webpack5 use extract-loader to extract html file,but extract-loader always report error. HOT 3
- No dependencies to successor loader
- Reporting a vulnerability
- Archive this package
- loaderContext.loadModule API throw error when using with css-loader
- Missing Babel dependencies in 5.0
- Shouldn't sourceMaps be ignored if the devtool option is set to false?
- Import error with ES6 js script embedded in html body HOT 1
- working incorrect with [email protected] HOT 1
- Doesn't work with aliases properly HOT 3
- undefined image src if image used twice in html HOT 1
- v5.2.0 breaks parts of code loaded with ref-loader HOT 1
- Update dependencies to babel7.
- style="background-image: url('file');" not parsed
- could there be boolean option to ignore .js files?
- Webpack 5.1.3 and PublicPath auto HOT 3
- Generating "[object Object]" for placeholders... HOT 4
- Extract loader doesn't work with css-loader 5.x HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from extract-loader.