I've had an issue with GlyphIcons not loading correctly when using this bower component: https://github.com/twbs/bootstrap-sass
I tracked down the issue to finding an #at-root element being injected into my CSS file.
I was able to get glyph icons working by removing the element, IMHO this is a damn useless SASS selector that does not add much value in the context it was being used.
Once I tracked down the issue, I then looked at the issues register in their GIT repository and found this item that suggested that the version of SASS compiler needed to be at least 3.3. See: https://github.com/twbs/bootstrap-sass/issues/953.
I am on windows and just using bower components so I did a re-installation of Boostrap-Sass
bower install bootstrap-sass -g
But this did not resolve my problem.
I'm not sure what the issue is, I hope someone has a solution to getting the latest bootstrap sass working on a windows/node environment.
For now I have fixed the issue by find the 2 references to #at-root in folder bootstrap-sass-official and just removing them.
Installed the latest version of Ruby
I followed this link http://awordpress.net/blog/install-sass-compass-manually-windows/ for doing manual install of SASS.
I'm not sure why I could not get compass to install (as per the link above) but it did not matter as the firth point in that link was all I needed to get SASS updated on a windows
gem install sass
Related
I am facing an issue with code highlighting when using prism-react-renderer component in Gatsby. I have configured it as per instructions in FormidableLabs/prism-react-renderer.
Everything works in development mode, but when I build a production version with the gatsby build command, the pre tag is not decorated with prism classes (class="prism-code language-python" is missing). My guess is that the production build does not include the right component or CSS, but I don't know where to start looking.
Also, this issue was not present when I used the same code 7-8 months back in another project. So it may be a problem introduced in the past few months because of a plugin/component update.
Attached are two screenshots - one with gatsby develop and another with gatsby build.
Commands I ran to setup and install the requisites:
> gatsby new test-mdx-prism-rendering https://github.com/gatsbyjs/gatsby-starter-hello-world
> npm install --save gatsby-plugin-mdx #mdx-js/mdx #mdx-js/react
> npm install --save mdx-utils
> npm install --save prism-react-renderer
Sample GitHub project is at subhashb/test-mdx-prism-rendering
Found the answer as I tried to dig deeper.
The workaround is discussed here: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/394
Apparently, the wrapRootElement defined in gatsby-browser.js should be made available in gatsby-ssr.js as well.
I recently added various libraries with yarn like so:
yarn add jquery backbone underscore bootstrap
With bower there was a way to list out the paths that each of these libraries was in, how do I do this with yarn?
yarn list --paths only gives me the names of the libraries and the version number.
The problem is you are trying to utilize yarn the way bower used to work, but yarn list --paths will only give you the dependencies and version number as you noted.
I think what you need to understand is that you are not using bower_components, you are using node_modules. With that said, your paths are probably something like /node_modules/bootstrap/dist/css/bootstrap.css. Open your node_modules folder and you will see what I am talking about.
I will be using Semantic-UI-React in my project but I came across following issues:
Docs link : https://react.semantic-ui.com/usage#css
Docs say webpack 1 is supported but not recommended. I am using Create React App which comes with webpack version 1.14.0. So does that mean I should not use Semantic-UI-React with CRA?
For styling, I also want some custom styles in my project , so I went with third option of Semantic UI package mentioned in the docs..
npm install semantic-ui --save-dev runs gulp internally and creates a semantic folder. But there is no dist folder as mentioned in the docs. From which path I should refer the semantic.min.css in my index.js file?
I am basically trying to use Semantic-UI-React with semantic.min.css with some of my own styles on top of it. But it seems I am making some mistake in the setup. Another option may be to go ahead with Semantic UI CSS package ? ...but according to docs I will not be able to use custom styles with this method.
I am a bit confused here , please help :)
The SUI-React docs comment about not recommending use of Webpack 1 is simply because it's not the latest version of Webpack. Webpack 1 still works fine in general. Also, the current version of Create-React-App (1.0) uses Webpack 2, and if you haven't "ejected" your CRA project, you can easily upgrade the react-scripts dependency to use the latest version.
If you want to build a custom Semantic-UI CSS file, yes, you would install the semantic-ui package, and that will create a semantic folder containing Semantic-UI's LESS source files and build system. From there, you would make any edits to SUI's source for your customization. Once you've made your edits, run gulp build inside that semantic folder, and it will create a semantic/dist folder containing the compiled CSS files (per the instructions at https://semantic-ui.com/introduction/build-tools.html ). Finally, you would copy the generated CSS files into your project, probably inside the src folder, and import those in your JS source.
If you don't care about generating a customized Semantic-UI CSS build, you can npm install --save semantic-ui-css, which has a pre-built version of the default Semantic-UI theme, and import the CSS from there.
For what it's worth, my own "Practical Redux" tutorial series uses Semantic-UI-React and the semantic-ui-css package, and I show how to add semantic-ui-css in Practical Redux, Part 4: UI Layout and Project Structure. (I've also used a custom Semantic-UI CSS build in my "real" project at work.)
Having got through https://docs.angularjs.org/tutorial I've decided to add there some componenets from http://angular-ui.github.io/bootstrap/ . To do so I ran
bower install angular-bootstrap
as suggested here https://github.com/angular-ui/bootstrap#installation. But I got
bower ECONFLICT Unable to find suitable version for angular
Then I noticed that "angular-bootstrap" on bower (http://bower.io/search/?q=angular-bootstrap) points to some other project (https://github.com/angular-ui/bootstrap-bower) whereas https://github.com/angular-ui/bootstrap has name "angular-ui-bootstrap" there. So I tried
bower install angular-ui-bootstrap --save
and it seemed to work. So, the questions are:
1) Did I add correct angular-ui? Although bower worked, the components I added to my page were screwed.
2) Do I understand correctly that bower decides if version is suitable or not based on data it takes from its http://bower.io/?
Best regards, Eugene.
UPD: seems to be it was wrong angular-ui - https://github.com/angular-ui/bootstrap/issues/1936
I am using Compass 0.11.5 with SASS 3.1.15 to create a custom theme in Ext-Js 4. Everytime I try to compile, I get the same error:
error my-ext.theme.scss (Line 115: Functions may only be defined at the root of a
document)
The hang-up seems to be on the #import statement with 'ext4/default/all'. Like others I have tried for days to find a solution for this and could only come up with using an older version of SASS (3.1.11) but I can't find that anywhere online.
Is there another workaround or can someone please show me where to get the 3.1.11 version of SASS?
Go easy on me as I am a Graphic Designer not a Programmer :)
Thanks!
getting sass 3.1.11: gem install sass -v 3.1.11
removing sass 3.1.15: gem uninstall sass -v 3.1.15
You'll still likely run into additional problems, referenced here, with solutions: http://www.sencha.com/forum/showthread.php?158358-4.0.7-Syntax-errors-when-compiling-SASS-themes
Upgrading to Ext JS 4.1 RC 2 might also be a viable option for you
The combination that worked for me to build ExtJS 4.1.1 css is:
Ruby 1.9.3p547
Sass 3.2.5 (Media Mark)
Compass 0.12.2 (Alnilam)