I was playing around with Bootstrap4 on codepen.io where I import production bundle of bootstrap (bootstrap.bundle.min.js) from a CDN.
I was wondering how to import _breakpoints within my SCSS? Unable to figure out the path.
I need to use Bootstrap Sass mixins.
Production bundles I'm importing:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js
I was to import the scss files from github in Pen Settings > CSS > Add External Stylesheets/Pens.
In particular, please keep the order:
https://raw.githubusercontent.com/twbs/bootstrap/main/scss/_functions.scss
https://raw.githubusercontent.com/twbs/bootstrap/9030f57db7762a48c813881ef22a99e6cebe99ce/scss/_variables.scss
https://raw.githubusercontent.com/twbs/bootstrap/3aaaa01ffa71e5a784451753d5bf9b86a1d5323c/scss/mixins/_breakpoints.scss
Eg: https://codepen.io/borracciablu/pen/JjOweaP
Note: Example done with Bootstrap 5, but same technique can be used for Bootstrap 4
Related
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I'm building an ionic app and would like to add unit tests for a couple of services. I'm trying to get jest working with typescript but it doesn't seem to play well.
I'm getting this error:
/myuser/project/node_modules/#ionic/storage/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } from '#angular/core';
^^^^^^
SyntaxError: Unexpected token import
Now I have read that you have to add the babel-plugin-transform-es2015-modules-commonjs and use that in the test env of babel. However I am using babel 7 and this plugin is not available for babel 7. Is there a different solution?
I will also provide my package.json and .babelrc below.
gist
You just need to add #ionic/storage to your transformIgnorePatterns in jest config. For example, here's mine, take note of the #ionic/storage part:
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|moment|#ionic/storage|#ionic-native)"
]
Additionally, make sure in your tsconfig compiler options you have module: 'commonjs'
Also, if you need localstorage mocks, you can just use the following npm module:
npm install --save-dev jest-localstorage-mock
and then (in your setupJest.ts file)
import 'jest-localstorage-mock
Lastly, I recommend taking a look at:
https://github.com/thymikee/jest-preset-angular
for more help with jest + ionic configurations.
Here is my file structure
component.ts
/services
first.service.ts
second.service.ts
index.ts
index.ts
export * from './first.service';
export * from './second.service';
From component.ts, I wish to use a service. This is how my IDE (PhpStorm/WebStorm) automatically generates the import code
import { FirstService } from './services/first.service'
Of course this works. But I would prefer:
import { FirstService } from './services/index'
Can this be tweaked through a setting?
Update
I've changed my mind about using barrel files all over my Angular project after reading this thread about the subject. I would recommend reading it to anyone considering doing the same thing.
In Settings | Editor | Code Style | TypeScript | Imports, enable Use directory import (Node-style module resolution) . When this checkbox is selected, import statements are generated in compliance with the Node.js module resolution strategy
I imported module/components through npm for Angular 2 development, Can i customize the imported module in node_modules folder and get reflected in my application?
I've got a file named index.js which looks like this:
import Backbone from 'backbone'
import _ from 'underscore'
import $ from 'jquery'
console.log("blah")
export default {...}
In my index.html I've got:
<script>
System.import('index');
</script>
But what's baffling me is that I can see the file being loaded (in the dev tools network panel) but the console.log is never run. If this is the case, how am I to bootstrap my application?
Several online tutorials suggest bootstrapping it in the System.import file but how can that be done if the code isn't executed?
I ended up adding a .then() to the System.import with three anonymous functions, all with just a debugger and found that the import $ from 'jquery' was timing out because I didn't have the library installed. I removed the import declaration and the app was still trying to load jquery, so I installed it and it fixed the issue.