I'm trying to extract some media queries from my css bundles, but unfortunately plugin is not working.
ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/jscrollpane/style/jquery.jscrollpane.css
Module build failed: TypeError: Invalid PostCSS Plugin found at: plugins[0]
Here is my postcss.config.js
const path = require('path');
module.exports = {
plugins: [
{
'postcss-extract-media-query': {
output: {
path: path.join(__dirname, 'dist'),
name: '[name]-[query].[ext]'
},
queries: {
'screen and (min-width: 1024px)': 'desktop'
}
}
}
]
}
Postcss works fine without it, at least I don't have any errors
Part of webpack.config.js, I doubt I have any problems here since it works fine
cssLoader = [ 'css-loader', 'postcss-loader'],
return {
module: {
rules: [ { test: /\.css$/, use: cssLoader },]
}
}
Part of my package.json
"postcss": "^7.0.14",
"postcss-extract-media-query": "^1.2.0",
"postcss-loader": "^3.0.0",
"webpack": "^3.12.0",
Do you have any idea why it's not working?
UPD:
I don't have any errors if I will use it as follows:
module.exports = {
plugins: [
require('postcss-extract-media-query'),
] }
But I need to set up some options as well, so it's not working for me
Related
I am trying to enable CSS support for older browsers and introduce cross-compatibility. I am using autoprefixer as processor along with postcss-load-config.
The expected CSS should include browser compatibility for browsers like Safari or Mozilla, but the builds do not add the required CSS.
.neutrinorc.js
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
]
}
...
};
package.json
{
...
"postcss": {
"parser": "sugarss",
"map": false,
"plugins": {
"postcss-plugin": {}
}
}
...
}
webpack.config.js just uses neutrino to create an instance of webpack using neutrino const config = neutrino().webpack(); and sets aliases for folders.
I'm having my webpack set up and it's running all fine, but in development it is serving my compiled scss stylesheets inline instead of using an URL.
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: "style-loader"},
{ loader: "css-loader" },
{ loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
},
{ loader: "sass-loader" }
]
}
]
}
So I grabbed the docs and read up on how to use a single CSS file instead. I updated my webpack config to the following and since all loaders are running in reverse order this should be working;
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: "style-loader/url"},
{ loader: "file-loader" },
{ loader: "css-loader" },
{ loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
},
{ loader: "sass-loader" }
]
}
]
}
It results in no errors, and inserts the following stylesheet into my header;
<link rel="stylesheet" type="text/css" href="6bbafb3b6c677b38556511efc7391506.scss">
As you can see it's creating an scss file, whereas I was expecting a .css file. I tried moving the file-loader around but that didn't work either and resulted in several crashes. Any idea how to turn this into a working css file?
I can't use mini-css-extract in my dev env since I'm using HMR. I already got this working on my prod env.
Update: When removing css-loader it compiles and shows my css applied to the page. But when I inspect the elements everything is on line 1 and the file it refers to can not be found
I'm importing my css like this in index.js by the way;
import '../css/styles.scss';
You can install extract-text-webpack-plugin for webpack 4 using:
npm i -D extract-text-webpack-plugin#next
The you can define the following constants:
// Configuring PostCSS loader
const postcssLoader = {
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
// Write future-proof CSS and forget old preprocessor specific syntax.
// It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
require('postcss-preset-env')()
]
}
};
// Configuring CSS loader
const cssloader = {
loader: 'css-loader',
options: {
importLoaders: 1
}
};
Then in your SASS loader section, you can use the following:
ExtractTextPlugin.extract({
use: [cssloader, postcssLoader, 'sass-loader']
})
Then in you plugins section, you need to use the following:
new ExtractTextPlugin({
filename: 'css/[name].css'
)
Now suppose that your entry section is like below:
entry: {
app: 'index.js'
}
The generated CSS will be named as app.css and placed inside the css folder.
Another useful plugins for handling these type of post creating operations are:
HtmlWebpackPlugin and HtmlWebpackIncludeAssetsPlugin
Working with these plugins along with extract-text-webpack-plugin gives you a lot of flexibility.
I had a similar issue with webpack, after searching for a long time i found the soluton of combining a few plugins:
This is my result config: (as a bonus it preserves your sass sourcemaps;))
watch: true,
mode: 'development',
devtool: 'source-map',
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css", //make sure you use this format to prevent .scss extention in the hot reload file
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
'css-hot-loader', //5. this will hot load all the extracted css.
MiniCssExtractPlugin.loader, //4 this will extract all css
{
loader: "css-loader", //3. this is where the fun starts
options: {
sourceMap: true
}
},
{
loader: "postcss-loader", //2. add post css
options: {
sourceMap: true
}
},
{
loader: "sass-loader", //1 . you can ingore the globImporter
options: {
importer: globImporter(),
includePaths: ["node_modules"],
sourceMap: true
}
}
]
},
]
}
I made some apps that wrapper some site with custom css. but image is not shown.
This is my webpack.config.js module part.
module: {
rules: [
{
test: /\.css$/,
loaders: ['css-loader']
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1000000 // 1000kb
}
}
]
},
}
Css look like this
.menu {
background-images: url("images/menu.png");
}
Some of issue with jQuery and Security(External Sites!), I put nodeIntegration: false in webPreferences
const css = require('./foo.css');
// ..
webContents.insertCSS(css.toString());
but launch a app, image is not shown. in console, I got this background-images url
background-image: url(data:image/jpeg;png,bW9kdWxl //...
decode base64 result is
module.exports = "data:image/png;base64 //...
I think module.exports cause this(Edit 3: Uncaught ReferenceError: module is not defined in console), because nodeIntegration: false
Is there any option to remove module.exports = in css-loader with other loaders? (or just turn nodeIntergration to true)?
It is same result on file-loader.
Edit 1: In my package.json: "css-loader": "^0.28.7", "url-loader": "^0.6.2", "webpack": "^3.8.1"
Edit 2: Maybe cuase by this in css-loader?
I have a package and i want export my SASS variables to other packages use it. Currently my all .scss files are compiles and put in /dist/main.css file. My webpack config:
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ['./src/index.js'],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.(scss|sass|css)$/,
loader: ExtractTextPlugin.extract("style", "css!sass")
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
},
{
test: /\.scss$/, loader: 'style!css!sass!sass-resources'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: __dirname + '/build',
publicPath: '/',
filename: 'index.js',
library: 'Supernova',
libraryTarget: 'umd'
},
externals: {
'react': 'react',
'react-dom': 'react-dom'
},
plugins: [
new ExtractTextPlugin("[name].css")
]
};
My objective is create a package like bootstrap-sass.
If you want to make the variables you use within your sass files available to consumers of your published package, then you'll need to look at some special configuration for node-sass.
Currently (and as of the time you posted this) node-sass supports writing your own custom sass functions in javascript: https://github.com/sass/node-sass#functions--v300---experimental
This is untested, but we did this a while ago at a company i worked for...to do what you want, you'd need something like:
src/
your-package.js
your-styles.scss
tools/
constants/
colours.js
webpack/
...
base.sass.js
base.js
development.js
production.js
sass/
functions/
colours.js
# tools/webpack/base.sass.js
const Config = require('webpack-config').default
import {
signature as ColourSignature,
handler as ColourHandler
} from '#tools/sass/functions/colours
module.exports = new Config()
.merge({
module: {
rules: [
{
test: /\.scss$/,
use: [
...
{ loader: 'sass-loader',
options: {
sourceMap: true,
functions: {
[ColourSignature]: ColourHandler
}
}
},
]
}
]
}
})
# src/your-package.js
import Colours from '#tools/constants/colours'
import "./your-styles.scss"
export default YourAwesomeComponent {
static Colours = Colours
}
export const colours = Colours
# src/your-styles.scss
.your-awesome-component {
background-color: ColourGet(veganvomit, sobrightithurts);
}
# tools/sass/functions/colour.js
import Colours from '#tools/constants/colours'
export signature = 'ColourGet($name, $shade: default)'
export handler = function(name, shade) {
const colour = Colours[name]
if (!colour) return
if (typeof colour === 'string') return colour
return colour[shade]
}
# tools/sass/constants/colours.js
export default {
veganvomit: {
sobrightithurts: "darkkhaki",
light: "#D2691E",
default: "#8B4513",
somethingsomethingsomethingdarkside: "#000"
}
}
So now when you publish your package, they can access sass variables from your default export YourAwesomeClass.Colours or they can import it directly `import { Colours } from 'your-awesome-package'
I highly recommend using webpack-merge to separate out your Sass config to make it easy for other packages to use it. For your current config, I would do three things:
Add webpack-merge to your project (npm i --save-dev webpack-merge).
Put your Sass config into a separate file, named something like webpack.sass-config.js. Have it include the following:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
exports.config = function(options) {
return {
module: {
loaders: [
{
test: /\.(scss|sass|css)$/,
loader: ExtractTextPlugin.extract("style", "css!sass")
},
{
test: /\.scss$/, loader: 'style!css!sass!sass-resources'
}
]
},
plugins: [
new ExtractTextPlugin("[name].css")
]
}
}
// Side note: returning a function instead of a plain object lets
// you pass optional parameters from your main config file. This
// is useful if you want to make something like your compiled css
// file name different for another Webpack project without having
// to edit your Sass configuration file.
Update your webpack.config.js to the following:
var merge = require('webpack-merge');
// import your separated Sass configuration
var sassConfig = require('webpack.sass-config');
// Define your common config for entry, output, JSX, fonts, etc.
var common = {
entry: ['./src/index.js'],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: __dirname + '/build',
publicPath: '/',
filename: 'index.js',
library: 'Supernova',
libraryTarget: 'umd'
},
externals: {
'react': 'react',
'react-dom': 'react-dom'
}
};
// Merge your common config and Sass config
var config = merge(
common,
sassConfig.config()
);
// Export the merged configuration
modules.exports = config;
Obviously, this can go far beyond just your Sass config. I use webpack-merge to separate my development config from my production config. This article on Survive JS is a great resource for how to make the most of your Webpack setup.
Using latest node and Grunt 0.4.x, react 0.10.x
What to via Grunt execute browserify on React JSX files that have requires on jquery in them:
var $ = require('jquery');
Tried moving the shim transformation into the package.json after reading about a similar problem. Have the following at the bottom of my package.json file:
"browser": {
"jquery": "./bower_components/jquery/jquery.min.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
}
Can't get it browserify to resolve on a simple JavaScript file (with just "var $ = require('jquery');) from Grunt. Gruntfile.js has:
browserify: {
options: {
debug: true
},
src: ['src/views/**/*.js'],
dest: 'build/javascript/client.js'
},
Running Grunt gives the following error:
Error: module "jquery" not found from "D:\\development\\projects\\Prenotes\\src\\views\\dummy.js"
If and when I get this working then I assume "reactify" can be added to the transform array in the package.json.
I put "reactify" in my transform segment in the package.json and redid the Grunt browserify as:
browserify: {
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
Without the "dist" browserify wouldn't run properly.
This got the shim to work but reactify wouldn't run, so I ended up switching back to grunt-react plus pulled the transform logic back into the Gruntfile.js (which just feels better).
So at the end of the package.json there is:
"browser": {
"jquery": "./lib/jquery/jquery.js",
"bootstrap": "./lib/bootstrap/bootstrap.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
}
and in the Gruntfile.js:
browserify: {
options: {
debug: true,
transform: ['browserify-shim', require('grunt-react').browserify]
},
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
This both shims and processes the JSX. Finally.