I will give as detailed of an explanation as possible...
The directory where the stylesheets are located looks like this:
As is required with the newest version of Meteor, I renamed each file in the sub folders with the .import.less extension.
To import the less files, I added the #import designations to the files at root of the folder. For example, bootstrap.less looks like this:
However, the stylesheets are not importing correctly to client, so I must have done something wrong here. Not sure what it is, as I've tried everything I can think of. If someone can point me in the right direction, I would greatly appreciate it.
Related
I'm starting to learn by my own and I tried for the first time to use sass in order to get more clean my code, having everything on sections. So the problem is when I try to give some styles to the navbar, I don't know why when I write code it doesn't apply. Maybe is because I'm not linking correctly or just using bad the sass compiler.
The best option to help me is take a look into my repository where I started to build this project to practice. I really hope could help me because I want to create differents sections like navbar, body, articles, footer using sass and give them styles.
https://github.com/Shylex96/test-portfolio
Edit: After a long search about this issue I see there is a problem with "use" and I have to change rules or something like that, but still don't know.
Replace #use with #import in your scss files.
Try updating your \util\style.scss like below:
#import '../globals/';
#import '../components/';
Save and compile them then copy the resulting css files to dist folder if they weren't copied automatically.
Update the stylesheet link in your index.html file to:
<link rel="stylesheet" type="text/css" href="dist/style.css">
It should be "dist/style.css" not "/dist/style.css"
FINALLY!! I solved it and I'm going to commit what helps me if someone have same issues..
I had to reinstall node.js, install gulp, and change "about_Execution_Policies" from windows.. when I did, I could finally install gulp correctly and then I install again sass. Of course, I just converted all the changes that people told me about into the first ones I had.
I created a new file called gulpfie.js and two more files: .gitignore and .gitattributes
So, If someone need it, can check the changes here: https://github.com/Shylex96/test-portfolio
Webpack is powerful, sure, but it's confusing and complicated for beginners (like I am). Doesn't help that recently they moved to 2.2 so a lot of documentation I see is for the older version which adds to this difficulty.
All I want to do is this:
I have an app.css and a main.css which I want to minify and bundle into one (say app.min.css) and copy to my output directory - what's the easiest way?
I am manually linking it in my html file so I don't need webpack to write out a URL for me or anything. I may do a lot more fancy stuff around modularization latter, but for now I'd like to get my basic setup up and running. I do have my webpack.config.js running on my entry index.js file and that all seems fine.
What's the simplest way to do it? What am I missing? I'm getting lost in this loader and that loader (css-loader, raw-loader, style-loader...) and errors that are cryptic and take time to figure out. It surprises me that for a tool so powerful you'd imagine there are simpler ways to do basic things like this...
Thank you for the help
This is actually very simple, and the docs do a good job of explaining it.
First you need to make sure you have a css loader configured so Webpack knows what to do with css files. Then by using the ExtractTextPlugin you basically bundle what you specify into a separate file.
The entry block can take multiple files, so you could modify it like so. OR you could require/import them at the top of index.js.
entry: {
bundle: "./index.js",
main: "./main.css",
app: "./app.css"
}
Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!
I have a question about how to solve the following situation:
In my sass-files I use absolute path variables in my main include files, e.g. fonts are located in /assets/fonts/... and icons are located in /assets/icons/... and so on. Now these paths are obviously working only when the domain is in root.
The environment I wish my application to run on has a different folder structure which goes a few levels deep.
Here is an example of the file structure in my development environment:
/root
assets
icons
...
home
home.scss
page1
module
module.scss
Here is an example of the file structure in the new environment:
/root
various
subfolders
assets
icons
...
css
home
home.css
page1
module
module.css
As can be seen: The compiled CSS gets created in subfolders which can become quite deep, i.e. like 8 stories deep. The root declaration in my css will no longer work because of the new tree structure.
My options are as follows:
adjust my sass so that at all paths are relative (don't like to do that, will make my sass more complicated, everything seems to be good the way it is)
adjust my .htaccess so that this is covered (don't like that either, have to adjust everytime I switch the environment, seems "hacky")
create/use a gulp task that fixes my compiled css files so that the relative paths are added to all findings of url("/assets
I have searched quite a lot, looked into thread2, gulp-tap and gulp-replace. But somehow I can't quite get it right. For instance: The obvious solution, gulp-replace, is not working as I need it to because I need to get information about the file that is currently in the pipe (to get its file.path and thus find out how many stories the file has climb up to reach the assets folder).
Does anyone has ever done this? Or maybe has an idea how to solve this?
Alright, solved it myself. I have created a gulp-plugin for this:
https://www.npmjs.com/package/gulp-css-adjust-url-path
I'm trying to troubleshoot a LESS issue with my Meteor code..
I have bootstrap3-less package installed but I don't know where Meteor is getting it's LESS files from. This whole time I thought it was coming from a .less file in my client/ folder but I removed that entirely but for some reason my Meteor CSS file does not change once I remove that. But yet, when I inspect the compiled CSS file, it stayed exactly the same.
However, when I make changes to my .css file Meteor picks that up right away..
Anyone have this experience? thanks
The bootstrap3-less package contains the less code inside itself. If you want to use your own less code instead of the code inside bootstrap3-less, you should remove bootstrap3-less.
Here you can see the code that the bootstrap3-less package adds to your app: https://github.com/simison/bootstrap3-less
They suggest that you can customize bootstrap by adding the less file to your client folder, but even if you don't have that file the app will load all of the less content from the package.