I want to add Bootstrap CSS to my own sub-elements by using SASS inheritance:
nav > a {
#extend: .nav-item;
#extend: .nav-link;
}
I use Node with webpack for bundling. And I've installed the bootstrap-sass but I can't seem to get the #import 'bootstrap' to work. All I get is File to import not found or unreadable: bootstrap. The sass part of the webpack code is:
module: {
loaders: [
....,
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass'),
}],
I guess this must be something trivial that I've missed. It's not entirely surprising that SASS doesn't have access to the library but I haven't found any good hints on how to provide the library directly to SASS.
I literally have no what you have done so far for setup and other things. In simple english, if you are using SASS files downloaded from bootstrap's official website, you can use their mixins, variables and extend code in your own code file. Though it needs proper project setup for files and import them in a proper way.
In the shared code, your syntax for #extend appears to be wrong. I have shown a dummy code snippet for demo purpose.
// code already written inside Bootstrap source file.
.nav-item {
background:red;
}
.nav-link {
color: #fff;
}
// your code
.nav > a {
#extend .nav-item;
#extend .nav-link;
}
You can use http://www.sassmeister.com/website for trial and error.
This is what it looks like, when compiled.
Related
In a simple Typescript program I require Node FFI with
import * as Electron from 'electron';`
import * as ffi from 'ffi';`
and then
mylib = ffi.Library('libmoi', {
'worker': [ 'string', [ 'string' ] ],
'test' : [ 'string', [] ]
} );
Linking that up via webpack yields
WARNING in ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
# ./~/bindings/bindings.js 76:22-40 76:43-53
The problem seems to be that FFI has a dynamic require and the fix seems to be to apply webpack.ContextReplacementPlugin in the webpack.config.js file.
This is a bit out of my reach, but an example for an Angular case is:
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
root('./src') // location of your src
)
]
Any idea how to do this for FFI?
Here is the answer: github issue comment on the Johnny-Five repo
Quoting from brodo's answer, this is what you do to stop webpack getting snarled up with "bindings" and similar:
... the webpack config looks like this:
module.exports = {
plugins: [
new webpack.ContextReplacementPlugin(/bindings$/, /^$/)
],
externals: ["bindings"]
}
I also had a similar issue, somehow, I managed to resolve it. I will first explain my understanding.
Main work of webpack is to bundle the separate code file into one file, by default it bundles all the code that is referenced in its tree.
Generally two types of node_modules:
To be used on browser side(angular, rxjs etc)
To be used on nodejs side(express, ffi etc)
It is safer to bundle browser side node_module but not safer to bundle node side node_module because they are not designed like that So the solution is below two steps:
Give appropriate target(node, electron etc) in webpack.config.js file e.g "target":'electron-renderer' by default it is browser
Declare node_side module as external dependency in your webpack.config.js file e.g.
"externals": {
"bindings": "require('bindings')",
"ffi": "require('ffi')"
}
I'm still trying to wrap my head around webpack, and coming from Gulp it's quite confusing. My project structure looks like:
./root
-- src
-- styles.scss
-- bin
-- node_modules
-- webpack.config.js
So just something super simple, I want to compile the styles.scss in the src directory and output it to the bin directory. I installed the following loaders:
style-loader
css-loader
sass-loader (also installed node_sass as a dependency)
Now I know I'm not grasping something very fundamental of Webpack here but here's my webpack.config.js:
module.exports = {
entry: './src/styles.scss',
output: {
path: './bin',
filename: 'styles.css'
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
When I run webpack in the root of my directory it looks like it works. But the styles.css file looks like it contains a bunch of JavaScript code. So I don't understand that and need some clarity. I'm vaguely guessing that you can't use webpack if you don't have any JavaScript files in your project (besides webpack.config.js of course...
I am by far no webpack expert, but to my understanding, this is exactly what webpack is supposed to do, according to it's own documentation:
Loaders
webpack can only process JavaScript natively, but loaders are used to
transform other resources into JavaScript. [...]
What this means is, even if you only include SCSS-Files, webpack will convert them into a JavaScript-File, which can then be included just like any other JS-File.
For example, if you changed your styles.css into styles.js, you would call it in the head of html with
<head>
...
<script type="application/javascript" src="styles.js" charset="utf-8"></script>
...
</head>
Despite this, your CSS, although called as and wrapped in JavaScript, will still be correctly treated as CSS.
Why would you want to do this?
Basically to save calls to the server.
Webpack gives you the opportunity, to bundle your JS, your [S]CSS and many other things into a single JS-File, which you will be able to fetch with a single call to the server, therefore saving lots of round-trip-times.
Still, the browser will interpret all the resources accordingly.
I'm trying to require the bootstrap-webpack module in my webpacked application.
It appears to need jQuery, since the bundled javascript then throws the following:
Uncaught ReferenceError: jQuery is not defined
How do I go about specifying to webpack that jQuery is a dependency for the bootstrap-webpack module, to fix this issue? It feels like it should be trivial, but I've been struggling to figure it out.
I've tried adding:
"jquery": "latest"
to the dependecies in the bootstrap-webpack's package.json, but this didn't work. The documentation is incomplete, and I can't seem to find much about this issue. It should be trivial, right? Help!
There are two possible solutions:
Use the ProvidePlugin: It scans the source code for the given identifier and replaces it with a reference to the given module, just like it has been required.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Use the imports-loader: It provides the possibility to prepend preparations like require() statements.
// webpack.config.js
{
...
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
]
}
}
In that case you need to run npm install imports-loader --save before.
Via this github issue.
Install expose-loader and add require('expose?$!expose?jQuery!jquery'); to your main entry point just before you require webpack-bootstrap.
This will set jQuery on the window so any file can get at it. Be careful with this method all files will then have access to that version of jQuery regardless of whether it was explicitly required.
I am having an issue with brunch#1.7.6 not compiling bower_component css files. Similar to Separating app and vendor css in Brunch. Only the css/app.css is getting generated for me. :/
{
stylesheets: {
joinTo: {
'css/app.css': /^app/,
'css/vendor.css': /^bower_components/
}
}
Please let me know if I am doing something wrong. All seemed fine when I was using brunch#1.6.7. Did the config change with the introduction to bower being built in?
With regards to x-editable, I ran into the failure to include the bower_components css, but found that I simply had to add the specifics in the overrides section of bower.json (since it has multiple library options the main is not included in the .bower.json).
I used the following overrides successfully:
"overrides": {
"x-editable": {
"main": [
"dist/bootstrap3-editable/js/bootstrap-editable.js",
"dist/bootstrap3-editable/css/bootstrap-editable.css"
]
}
}
I'm having problems using canJS together with stealjs, i've cloned the repo of javascriptmvc (3.3 use canJS). Now i've this folder structure
/js
/can
/documentjs
/funcunit
/plugins
.
.
.
In another part of my application i've a "standalone module" e.g layout (generated using the scaffolding tool).
I load this module using "js/steal/steal.js?path/to/module/layout" inside my page and it works. If I stole some jquery plugins (e.g. located in the main js folder) inside my layout.js like so:
steal('plugins/jqueryplugin.js', 'plugins/jqueryplugin.css', function() {
// my code here
});
it still work, but when i try to add in the list of "dependecies" some component from "canJS" (even fixture.js generated with the tool...because it stoles can.fixture) it just stops to work and breaks everything. I've also tried using:
steal('that').then('this', function() {});
But i've the same results.....fail!!! anyone have any hints?
Ok i found the problem. There is nothing wrong with stealjs and canjs, but
canjs just load its own version of jquery
that will break my application. Now I need to find a way to load canjs and jquery separately (i use yii and some extensions need to have jquery loaded at a certain time so cannot wait for canjs).
Is the issue the version of jQuery or the order of dependencies?
You can configure steal via the stealconfig.js to use another version of jQuery and manage any dependencies.
An example can be found in the github repo: (this example does not show dependencies so i added one below)
https://github.com/bitovi/steal/blob/master/stealconfig.js
steal.config({
map: {
"*": {
"jquery/jquery.js": "jquery", // Map to path
"bootstrap/bootstrap.js": "bootstrap",
"can/util/util.js": "can/util/jquery/jquery.js"
}
},
paths: {
"jquery": "can/lib/jquery.1.8.3.js", // Path to jQuery
"bootstrap": "lib/bootstrap.js"
"yui/yui.js" : "can/lib/yui-3.7.3.js",
},
shim : {
jquery: {
exports: "jQuery"
},
bootstrap: { // A dependency example
'deps': ['jquery']
}
},
ext: {
js: "js",
css: "css",
less: "steal/less/less.js",
coffee: "steal/coffee/coffee.js",
ejs: "can/view/ejs/ejs.js",
mustache: "can/view/mustache/mustache.js"
}
});
Note: this is an untested example, hope this helps.
i had problem too with stealJs i have known that it work well with JavascriptMVC,
now i'm using AMD requireJs to dependency manage, an it works great with canjs.
here is the documentation http://canjs.com/guides/using-require.html, i hope that it help you!