I have a very basic Ruby on Rails installation. I have installed the bootstrap-sass gem, have the 'bootstrap-sass' ~> 2.3.1.0 in my Gemfile and ran bundle install. Restarted all applications. I have a style.css.scss file in app > assets > stylesheets which #imports 'bootstrap'; as well as the responsive. Those styles actually get pulled into my app, because they style the front-end. However, when I try to use a variable or mixin, I get the error in the image attached, as well as IntelliJ telling me it cannot find the variable. I'm new at this whole process, so I'm just trying to understand what's needed to resolve it.
I am using Ruby 2.0.0 and Rails 3.2.13rc2
https://docs.google.com/file/d/0BwMz3RH42HtQb0U1TXdHTVF0QjQ/edit?usp=sharing
#import "bootstrap";
body {
padding-top: 60px;
}
#import 'bootstrap-responsive';
.footer {
margin-top: 50px;
color: $greyLight;
a {
color: #e5e5e5;
}
}
here is a link to the live dev site on heruko, without use of the variables:
http://shrouded-ocean-4277.herokuapp.com/
EDIT: in my vendor/assets/stylesheets folder, there is no bootstrap folder or _mixins or _variables files. Should these have been installed when I placed the gem in the Gemfile and did an bundle install?
EDIT: adding my github: https://github.com/ChrisSki/omrails
Regarding your edit, the bootstrap will not be in vendor, but in a .gem file located somewhere inside your Ruby installation.
I set up a similar application recently, following this guide. I have 2 .css.scss files, one which includes and overrides parts of bootstrap, and the other one which contains my application's style (not directly related to Bootstrap). If you look at the second file, you can see that I imported bootstrap/variables because I needed to have access to some of Bootstrap's variables, and it works like a charm.
What I don't understand is why your original screenshot complains about something named variables, which I cannot see in your SCSS file... Have you tried bootstrap/variables instead?
EDIT:
I just cloned your repo, started the server and hacked style.css.scss. I think you made a typo in your tests :)
h1 {
color: $greyLight; /* Does not work!! */
color: $grayLight; /* Works :) */
}
You should declare your variables before you import bootstrap, then you can use the variables in your scss.
For example, here's how I use variables in my rails app:
/************************ CSS Variables ***************************/
$myColor: #0F851C;
/************************ Import Bootstrap ********************************/
#import 'bootstrap';
body { padding-top: 80px; }
#import 'bootstrap-responsive';
Just define your variables at the top of your scss, then import bootstrap. Then in your scss, you can use those variables like this:
#myDiv {
color: $myColor;
}
Hope this helps!
Related
I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.
I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).
For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?
The current documentation is not very precise about this. There are actually two cases:
Importing CSS from existing packages
You can pretty easily import CSS files from other Node-modules using the require() function:
import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render
fun main() {
require("bootstrap/dist/css/bootstrap.css")
render(document.getElementById("root")) {
h1 { +"Hello"}
}
}
For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.
Incorporating your own CSS into the Webpack build
This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:
Create webpack.conf.d directory in project's root and put inside some JS file containing:
config.resolve.modules.push("<your_stylesheet_dir>");
This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.
Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:
task("copyStylesheets", Copy::class) {
from(kotlin.sourceSets["main"].resources) {
include("styles/**")
}
into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
// kotlin { js { moduleName = "xyz" }} has to be set for this to work
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
dependsOn("copyStylesheets")
}
Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.
My build:
kotlin("js") version "1.7.20"
index.html
<link rel="stylesheet" href="index.css">
index.css is in the same resource folder as index.html.
This also works for images anything else, apparently.
I am working on a project where I am developing a set of UI components for developers to use to build out their sites. I have created an NPM package which consists of just the CSS required to implement an Accordion component.
I installed my css-accordion-component as a development dependency via npm install to a React project created using create-react-app. My Accordion.js file in the React project imports the css-accordion package from node_modules like so:
import "css-accordion-component/lib/accordion.css";
This does bring the styles into my project but none of the CSS Variables defined and used in the file are resolving. The CSS file looks like so:
:root {
--Accordion-bgColor: #fff;
};
.Accordion {
background-color: var(--Accordion-bgColor);
}
I believe it may be because the React project built with create-react-app is not running this imported css file through its post-css plugins. There seems to be a lot of out of date advice online about how to correctly configure Webpack to use PostCSS. Any advice would be really great.
:root {
--Accordion-bgColor: #fff;
};
^^ The semi-colon here proved to be the problem. It caused the whole :root block to fail to render.
I want to make a website in bootstrap 3 with SASS, but I'm not getting proper guidance how I should start like, how to install sass, then how should I compile that, which are the exacts files I have to use, etc? I spend so much time on Google, YouTube, but except bootstrap getting other framework installation guidance which I don't want and even I'm using wamp server, so: How should I run my website through my localhost, can anyone guide me on this?
I desperately want to use bootstrap 3 and SASS, so kindly guide me on the following, I have downloaded latest version of SASS from twitter bootstrap, now
How should I start working with this files?
What step should I follow to work with SASS?
What are the steps to compile?
How should I run my website from localhost?
Kindly guide me step by step as per my query.
Have you gone through this http://www.mindscapehq.com/products/web-workbench you can download and install and then the templates will be installed.
you can then add like this.
it will automatically generates a css file with same name and will convert the saas styles into css on saving the saas file. you just need to add the .css file that was generated to the corresponding pages
SCSS file style:
.fiest
{
width:500px;
height:250px;
}
CSS file which will be generated automatically:
.fiest {
width: 500px;
height: 250px; }
I like the autocompletion feature of Webstorm, Phpstorm and Intellij and the other jetbrain-products. It doesn't work however if I have a structure like this:
img/my-img.jpg
sass/main.scss
sass/component/_component.scss
// sass/main.scss:
#import "/component/component"
// _component.scss:
.class{
// => autocomplete doesn't work here as desired <=
// how intellij completes it
background: url(../../img/my-img.jpg)
// what i would like to have instead
background: url(../img/my-img.jpg)
}
Is there some way of telling IntellJ how to use the sass folder as base for the autocompletion of images and to get rid of the annoying error notice?
You can mark img folder as resourse root.
From jetbrains documentation:
Files under a folder marked as Resource Root can be referenced relative to this folder.
I am using worklight 6.1 version and building iPhone, android , windows phone environment.
Whenever I am deploying the environment it is adding worklight.css file with the environment in index.html file and adding some extra css in main.css file.
Issue is , these css is conflicting with my css files so just let me know how to avoid this or if can remove worklight.css file from index page.
Is there any solution for this.
You cannot not-load worklight.css, as it is inject to the app during build time.
What you can do instead is override any CSS rules using !important.
For example:
body {
background-color: red !important
}
What CSS does worklight.css contain that overrides your app's?
I know of only background-color: white being injected to the Android environment - you can override it with the above, and this is already fixed for a future release.