Develop Reference

Webpack. Different rules for different entry points with similar test-mask

We have a project with old-good-smarty-part and react-part.
We bundle react-part files with webpack.
We want to bundle non-react-part files with webpack too, but this files are a bit upper than webpack in project-tree. And here is a problem: we need to bundle them and place result to grand-grand-parent directory... So, how to split rules for this entry-point?
const ExtractJS = new ExtractTextPlugin({
filename: "../../[name].min.js"
});
module.exports = {
entry: {
reactApp: ["./src/entries/reactApp/index.tsx"],
// JS -- we need to place it "upper" than webpack directory in project
"scripts/oldStuff": ["./src/entries/oldStuff/index.js"]
},
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
cacheDirectory: true,
presets: [["es2015", { modules: false }], "stage-2", "react"],
plugins: ["transform-node-env-inline"],
env: {
development: {
plugins: ["react-hot-loader/babel"]
},
targets: {
browsers: ["last 2 versions", "ie >= 10"]
}
}
}
},
{
test: /\.js?$/,
include: [/(.*?)scripts(.*?)/, /(.*?)lib(.*?)/],
use: ExtractJS.extract({
use: {
loader: "raw-loader"
}
})
}
}
}
}
was tryed to solve this with include and exclude options, but this looks not good -- we got "cross-entry" files (something like /lib/foo/bar.js for react part and /lib/foo/boar.js for non-react part) and its about 15-20 files...
And here is a main question: is it possible to exclude entry-point for one rule and include it for another one (with exception of other entry-points)?

VueJS/Webpack - Not exporting sass file to css file

So I'm facing this problem that in my project I want to use sass as well as Vue but it wont compile.
So far I'm using vue-cli and have to init a normal project(vue init webpack project) and followed the guide here for global https://vue-loader.vuejs.org/en/configurations/pre-processors.html
And I wand the SCSS file to compile to a CSS and place itself in a folder.
After I've done that nothing happens it runs but without CSS.
Basically I want this -> src/asset/css/style.scss
To compile to this location -> static/css/style.css <- and then be a CSS
file because then I can load it into main.html
This is the webpack.base.conf file
{
test: /\.scss$/,
use: [
'sass-loader',
'style-loader',
'css-loader',
'postcss-loader',
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/layout.scss')
},
},
],
},
This is the utils file
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/layout.scss')
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
How will I be able to fix this?

Unable to load/require any css files in Node

I have a ReactJS application based off of this boilerplate.
I am simply trying to load and require or import a css file (to be embedded in <style> tag, as opposed to css link). Below are the two methods I have tried, and not ever both at the same time.
Method 1: Configure loaders in Webpack
These are all the loader configurations I have tried, but still resulted in this error: [require-hacker] Trying to load "something.css" as a "*.js"
dev.config.js
module: {
loaders: [
// loaders in here
]
}
{ test: /\.css$/, loader: "style!css" }
{ test: /\.css$/, loader: 'style-loader!css-loader'} from here
{ test: /\.css$/, loader: 'style!css!postcss' }
{ test: /\.css$/, loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss' }
{ test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
{
test: /\.css$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
Method 2: Use loaders directly
If I remove the css loaders altogether, and instead call require('style!css!./something.css'), I get this error:
Error: Cannot find module 'style!css!./something.css'
---- # NOTE: ----
I am able to properly require my .scss files and its webpack loader configuration is below. But for some reason my css files don't want to play that way too.
{ test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }

change extensions: ['less','scss'] to extensions: ['less','scss','css'] in webpack-isomorphic-tools.js at line 65.for more details you can see this

Webpack and external (vendor) .css

I'm slowly bringing Webpack into an existing project. At this point we won't require .css files. However, I would like Webpack to still process them.
I would like Webpack to just load the file, pass it to whatever .css loader is required (Stylus in our case), and output a .css file.
None of the combinations of ExtractTextPlugin, raw and file loaders, passing loaders into other loaders work, Webpack inevitably throws
Module build failed: ParseError: ...bootstrap-theme.min.css:5:1996
1| /*!
2| * Bootstrap v3.3.5 (http://getbootstrap.com)
3| * Copyright 2011-2015 Twitter, Inc.
...
expected "indent", got ";"
Is it even possible to process external files with Webpack like this?
Various combinations tried:
{
test: /\.(styl|css)/,
loader: 'raw!stylus'
}
{
test: /\.(styl|css)/,
loader: 'file!stylus'
}
{
test: /\.(styl|css)/,
loader: ExtractTextPlugin.extract('file', 'raw!stylus')
}
{
test: /\.(styl|css)/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
}

You don't need to pass your css files through the stylus loader, only the .styl files.
I've managed to make it work with this configuration:
module.exports = {
entry: {
name: './test.js'
},
output: {
filename: './bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.styl$/,
loaders: ['style', 'css', 'stylus']
},
{
test:/\.(woff2?|eot|ttf|svg)$/,
loader: 'url'
}
]
}
}
And then you can import/require your css files as such:
require('./test.css');
require('./node_modules/bootstrap/dist/css/bootstrap.min.css');

You could also add your CSS as an extra entry point of name:
module.exports = {
entry: {
name: [
'./test.js',
'./test.css',
],
},
/* … */
};

Webpack sass loader does not recognize global variables file

i have this sass directory:
- _vars.scss
- main.scss
//vars.scss
$base-container: 1400px;
//main.scss
#import './vars';
In other js file i have:
require('./some-module-sass-file');
//some-module-sass-file.scss
.container {
width: $base-container;
}
The problem is i have global variables in the vars file and the some-module-sass-file not recognize them and throw an error:
undefined variable $base-container

Without using sass-resources-loader:
Thanks to #Arseniy-II for helping me get to this answer, in conjunction with this thread:
https://github.com/webpack-contrib/sass-loader/issues/218
Using loader options in your webpack module rules, you can assign a data property to sass-loader, you should then be able to use all sass functions as expected:
module: {
rules: [
// Apply loader
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: '#import "path/to/global.scss";',
includePaths:[__dirname, 'src']
},
},
],
},
],
}

You have to import the vars file into every Sass partial that uses those variables, because every partial is compiled on its own; none of the files will 'know about' the others unless you specifically import them.
If you don't want to have to type the imports in every Sass file, you can look at baggage-loader, which will automatically add them for you.

Note that you need to use " and ; at the end
{
loader: 'sass-loader',
options: {
additionalData:'#import "path/to/general.sass";',
},
},

If you have Webpack 5 you have to use additionalData, the other options are not valid now:
{
loader: 'sass-loader',
options: {
additionalData: '#import path/to/general.sass',
}
},
If you do like this your general sass or scss file will get prepended

Webpack 4 solution:
{
loader: 'sass-loader', options: {
sourceMap: true,
prependData: '#import "pathto/vars";'
},
}
In order #import "pathto/vars"; to work you need Webpack to configure to resolve such imports. So it simply prepends the line.
This solution is good because you have no issues with sourcemaps like with using sass-resources-loader

You can use text-transform-loader package.
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'text-transform-loader',
options: {
prependText: `#import "${path.resolve(__dirname, './base.scss')}";`,
}
}
]
}