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

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.

Related

sass-loader prepend #import

Trying to prepend global styles imports to each *.scss file.
my relevant webpack config is
{
test: /\.scss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [
path.resolve(__dirname, 'path-to-global-style-dir'),
],
},
prependData: `
#import "${path.resolve(__dirname, 'path-to-global-style.scss')}";
`,
},
},
],
},
I'm getting the following error -
SassError: Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
I'm using webpack 4.42.1, sass-loader 8.0.2
anyone knows how to fix this error? or has other approaches on prepending imports to each .scss file?
thanks
Who ever stumble across this question,
I solved it by changing the .scss file name to something unique.
before it was "base", and I had a base.js somewhere inside /node_modules/ and the import resolved it instead of my desired .scss file.

Webpack 4 sass-loader import file without ~ tilde in path

Is there a way to use third-party SASS with imports like #import module-name/path and still have sass-loader resolve the files to node_modules?
If I put the ~ in like #import ~module-name/path this works and sass-loader looks into the node_modules and finds the files, but I am unable to modify the SASS files to add the ~.
I have tried a few things such as
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
includePaths: ["node_modules"]
}
}
]
}
]
but the modules do not resolve.
Any ideas? I see lots of other folks with the same issue but only see adding ~ as a real fix (which I can't do).
After much trial and effort, I found this is not possible AFAIK, but you can write something to enumerate your includePaths and add that array to your config.
The last part of each path should be a directory where an #import would be found.
For #import scoped-module-name/path
Have your includePaths with this:
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
includePaths: ["node_modules/#your_org"] // scoped-module-name exists here
}
}
]
}
]

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.

How to configure font file output directory from font-awesome-webpack in webpack?

I just installed font-awesome-webpack. I import it using: require("font-awesome-webpack");
My webpack config includes the following in my module loaders array:
{ 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" }
Problem is I am getting this error in developer console:
localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)
The problem is, those files are created at the root (within the mysite directory). How do I configure such that those woffs and ttf are output within the mysite/app directory?
I've recently wanted to use font awesome with webpack v1, I've installed the npm module font-awesome not font-awesome-webpack
You must install few loaders before :
npm i css-loader file-loader style-loader url-loader
and add use them in your webpack.config.js :
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}]
}
Now if you include in your entry.js :
require('font-awesome/css/font-awesome.css');
You normally be able to use font-awesome in your template :
<i class="fa fa-times"></i>
This gist helped me : https://gist.github.com/Turbo87/e8e941e68308d3b40ef6
As of Feb. 2016 this seems to be a common question with webpack, so I hope this provides some help. If you add this to the loader: '&name=./path/[hash].[ext]', that specifies where to look for those files. For example:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}
This places the correct URL to the fonts within the generated CSS file.
I recommend this method when dealing with anything other than css/scss. Hope this helps.
In addition to the above answers, I
I had to specify a path in output to get it working like so to specify the hosted location and not write the assets to the root path:
output: {
filename: "./bundle.js",
path: “./client”
},
module: {
loaders[
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
}
] // loaders
} // module
{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=100000'
}
This schema helped me
This is my case, because of my script path is like below:
script(src='/javascripts/app.js')
So, I have to add '&name./javascripts/[hash].[ext]' to all font files like:
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?name=./javascripts/[hash].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}
Just as a note, I came across a similar fault using the font-awesome-loader.
Where the directory would not be set correct, regardless of any of the changes above.
To correct this, the option publicPath can be added to output:
output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },
The folder /assets/ will be changed to wherever you actually store your fonts.
Hopefully this helps.
I had font-awesome-webpack working on my PC, but it wouldn't work on my Mac. I think my PC was still throwing the 404s for the .woff2, .woff, and .tiff, but the icons displayed properly, so I ignored the problem.
My Mac, however, would not display the icons. While reading this Q&A, I tried a bunch of things. Here's what lead to my solution:
On my http://localhost:8080/View/ page, I was getting 404s that looked like the link below:
I entered http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 into the browser, and confirmed the 404.
I tried going to http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (removing the extra path before the font file), and was able to access the file.
I modified Paul's answer to remove the . that made the file request relative.
For example, Paul suggested:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}
Take note of the &name parameter, that uses ./[hash].[ext]. I dropped the leading . and now there are no 404s (the browser correctly requests the files from the root of the site):
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}
Conclusion: If your entry point is NOT at your web root, and you're able to access the font files at the web root, you probably just need to use this name configuration to fix the path.
Same issue faced.
Fixed it using the below syntax,
loader: "file?name=./fonts/[hash].[ext]"
fonts is the directory name, replace it with your own directory name.
Example:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

Webpack sass where is the css file

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">

Categories