Webpack sass where is the css file - javascript

I am using web pack with sass loader like this:
module.exports = {
module: {
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass"
}
]
}
};
But i see the styles apply to the style tag, where is the generate css file?

By default, the style-loader inlines the compiled css into your bundle, which are added to the head of the page with the output file e.g. bundle.js. Using the extract-text-webpack-plugin you can remove the compiled css from the bundle, and export it to a separate file.
First - wrap your loader in the plugin:
loaders: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!sass")
}]
},
Then tell the plugin what to call the file it generates:
plugins: [
new ExtractTextPlugin("app.css")
]
Include this file in your HTML normally.

If you want a separate CSS file when using Webpack, you need to use the extract-text-webpack-plugin.

The extract-text-webpack-plugin has been deprecated you should use the mini-css-extract-plugin. Assuming you have your styles in css/app.scss, your entry file should import it as usual like:
import 'css/app.scss';
Add the plugin:
plugins: [new MiniCssExtractPlugin()]
And add the plugin to your loader chain:
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
When you run webpack with that configuration you'll end up with an app.css file loaded in your HTML with a tag similar to:
<link href="app.css" rel="stylesheet">

Related

How to load CSS files with webpack

Im trying to have my CSS file in the src folder copied into the dist folder on build - Im currently using a HTML file in my dist - ie im not using a javascript file so dont want the styles to be created as javascript.I just need the files to be copied into the dist. Heres my current config that isnt working.
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devServer:{
port:8000
},
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.css$/i,
use: [ 'style-loader','css-loader'],
},
{
test: /\.(png|jpe?g|gif|glb|gltf|typeface.json)$/i,
loader: 'file-loader',
options: {
publicPath: './',
name: '[name].[ext]'
},
},
]
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
}
I then use a link tag to add the css into the index.html file eg
<link rel="stylesheet" href="./style.css">
But this just adds javascript to the HTML file it builds in the dist.
How can i do this?
***EDIT: Im trying to add CSS files without merging them into my Javascript files
You can try using MiniCssExtractPlugin. As written in the documentation:
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
To use it, you can first install it, import it, add a loader and a plugin to your webpack config. Here's an example (don't forget to note the order must be correct):
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/i,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],
},
...
],
},
plugins: [
...
new MiniCssExtractPlugin(),
],
};
It will also add an automatic link tag to your css files in index.html results.

Extract text plugin specify input folder webpack

config.module.rules.push({
test: /\.css$/,
include: [
path.resolve(__dirname, 'static/styles/vendor'),
],
use: ExtractTextPlugin.extract({
loader: 'css-loader',
}),
});
config.plugins.push(new ExtractTextPlugin('/static/styles/vendor/foundation.css'));
unable to get the exact folder to loop over , if I exclude the include option it creates an output file with all css of the app
Directory structure
ExtractTextPlugin works only for files imported in your javascript. Are you sure your static content is imported in any of your js file?

How to include all CSS files in node_modules to be built by css-loader?

I am trying to extract all the CSS files found in the node_modules directory into a single file. My Webpack config is as follows:
{ // node_modules css in /node_modules/**/*.css
test: /\.css$/,
include: /node_modules/,
// extract to the node modules css file
use: ExtractTextPluginNodeMods.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: false,
},
},
],
}),
}
Unfortunately, none of the CSS files in the node_modules directory are being bundled into the file specified with ExtractTextPluginNodeMods. I have another ExtractTextPlugin instance that is successfully extracting CSS from my src directory. Any idea why I cannot get extraction of CSS from node_modules?
For reference, my other ExtractTextPlugin/Webpack config (which is bundling all of my CSS is here:
{
// OUR css in /src/
// the css output from sass loader will be caught here
// fonts are imported by css loader
// after transpiling of sass -> css, css-loader in webpack should take care of this
// https://github.com/webpack-contrib/css-loader
test: /\.css$/,
exclude: /node_modules/,
// extract to our css file
use: ExtractTextPluginSrc.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
// create modular css with the '[name]__[local]___[hash:base64:5]'
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
'postcss-loader',
],
}),
}
Webpack won't include the CSS files unless you explicitly import them from your javascript code. So you'll need:
import 'some_package/css/component.css';
in the part of your app that uses the CSS.
Alternatively you could use something like glob-loader to do
import 'glob-loader?node_modules_pattern_file';
and then have your "node_modules_pattern_file" include a glob like
../node_modules/**/*.css
...but I don't recommend this approach because you'll end up pulling in loads of files you don't need and it will be hard to maintain.

Webpack 2 and SASS: A SASS script can't find its font dependencies when it is #imported to another SASS file

I want to dig into modern frontend development using Webpack 2 and Materialize. Because I might customize the style, I want to #import the Materialize SASS file into my own SASS file, so I can overwrite stuff. However, if I do that, Webpack 2 can't compile my SASS file anymore because it doesn't find the Materialize fonts.
This is my current webpack.config.js, copypasted from all over the internet:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: "style.css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
entry: './src/js/index.js',
output: {
path: __dirname + '/public/dist',
filename: 'app.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}, {
loader: "resolve-url-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=80000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
},
plugins: [
extractSass
]
};
I installed materialize-css via npm. If I put the following in my src/js/index.js file, the compilation works fine:
require('materialize-css/sass/materialize.scss');
I get the desired outputs in my public/dist directory (app.js, style.css and the font files that Materialize provides). But as I said, I want to import Materialize to my own SASS file, which looks something like this (src/scss/main.scss):
#import "~materialize-css/sass/materialize";
// ... overwrite some stuff here ...
Because of to the ~ in front of the filepath, the loader looks for the file in the node_modules directory, thus the materialize.scss file can be imported successfully.
I then have two possibilities to include my SASS file in my Webpack bundle: either change the require() call in my index.js to import that file instead of the materialize.scss file or change the entry key in my webpack.config.js to
entry: [
'./src/js/index.js',
'./src/scss/main.scss'
],
Either way, the compilation fails because Webpack cannot find the font files. This is one of the many errors that occur
ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/scss/main.scss
Module not found: Error: Can't resolve '../fonts/roboto/Roboto-Thin.woff2' in 'C:\Users\Myname\Documents\Projects\webpack-test\src\scss'
# ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/scss/main.scss 6:75477-75521
# ./src/scss/main.scss
# multi ./src/js/index.js ./src/scss/main.scss
So this is where I am stuck. Why does the compilation work if I require() the Materialize SASS file directly? Why does it fail when I import the Materialize SASS file to my own SASS file? How do I have to change my Webpack config so that it can find the font files?
By accident I found out that materialize offers a variable to set the font path, so adjusting my own SASS file to this solved the problem
$roboto-font-path: "~materialize-css/fonts/roboto/" !default;
#import "~materialize-css/sass/materialize";
// ... my customizations ...

Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

I'm just getting started with Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader and I'm a little lost.
What I'd like to do is use the SASS version of bootstrap with my SPA Vue.js code. I want to do this so my bootstrap customisations can be done using SASS. Here is what I've done:
Created a new Vue.js + webpack project with vue-cli.
Installed bootstrap-sass and sass-loader.
Added the following to build/webpack.base.conf.js:
{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
{ test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }
Created src/style.scss with one line: #import 'bootstrap';
Added this line to the top of src/main.js: import './style.scss'
When I now run npm run dev I get the following error:
ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in Users/rstuart/Workspace/javascript/kapiche-demo/src
# ./src/main.js 3:0-25
I'm not sure why this isn't working.
Also, related to this question, how do I get access to Bootstrap SASS variables inside my Vue components? If I understand what is going on here, the SASS will be compiled to CSS before being included inline in main.js meaning there is no access to any Bootstrap variables in my components. Is there a way to achieve this?
I managed to solve this problem myself. Instead of trying to directly import style.scss, I deleted the file entirely and I replaced the <style> element of App.vue with the following:
<style lang="sass">
$icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
#import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
.wrapper {
margin-top: $navbar-height;
}
</style>
This has the added bonus of making Bootstrap variables available in the style block of Vue components. Also, I removed { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } from webpacker.base.conf.js entirely but kept the bit dealing with fonts. The loader for .vue files already deals with sass.
I managed to worked it the right way like this:
Vue:
<style lang="sass">
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
</style>
webpack config loader:
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.scss$/,
loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
Take note that I use the bootstrap-sass and not the default boostrap
It's trying to resolve the style module that you specified as a loader in this section of your webpack.base.conf.js:
{ test: /\.scss$/, loaders: [ **'style'**, 'css', 'sass' ] }
Given that you have a css and sass loader, that's likely an erroneous entry that you can remove to get yourself going.

Categories