I have a file mobile.styl that collects all styl files I need via #import:
#import '../../common/styles/colors'
#import '../../common/styles/init'
#import 'landing'
#import 'faq'
#import 'vehicle'
I have two 'landing' styl files, one is in current folder where mobile.styl is and another is where those two first imported files are ../../common/styles/.
If I have the order of imports like shown above, then stylus imports first colors and init files which is fine, but then it loads landing file NOT from current folder where mobile.styl is, but from ../../common/styles/ so I get the wrong styl file, which is for desktop version.
Now, if I put those two imports to the end of the file, then it first loads landing, faq, vehicle properly, then those two files from the proper paths as expected.
Is this a bug or intended behaviour?
I've dealt with this same issue. A few solutions I've found are:
Rename one of the files to something unique.
change landing.styl to landing-mobile.styl
Move the file you want to import into it's own folder
move landing.styl to mobile/landing.styl
Import a file from the folder root you want to be in before importing the file of the same name
import empty.styl that lives next to landing.styl then import landing.styl
Lastly, you can reference the path relative to the last file imported
import ../../landing.styl
I've placed the options in order of my personal preference, but they all should do the trick.
Related
I created a basic React application using CRA and react-bootstrap. I would like to load different bootswatch themes. All themes are downloaded and placed inside a src/themes folder. Each theme has its own folder with fixed set of filenames:
src/themes/
superhero/
_bootswatch.scss
_variables.scss
bootstrap.css
bootstrap.min.css
/cerulean
_bootswatch.scss
_variables.scss
bootstrap.css
bootstrap.min.css
and so on...
Now suppose I want to load superhero theme. This can be done in different ways which I show below:
I renamed index.css of CRA to index.scss and added the following lines to the top of the file (I have node-sass installed):
#import "./themes/superhero/variables";
#import "~bootstrap/scss/bootstrap";
#import "./themes/superhero/bootswatch";
I add the following line to index.js:
import './themes/superhero/bootstrap.min.css'
Both of these methods are working fine independently. What I want to do is to import them in index.js like this:
import './themes/superhero/_variables.scss'
import 'bootstrap/scss/bootstrap.scss';
import './themes/superhero/_bootswatch.scss'
When I do this, the first two lines get imported properly but I receive undefined variable errors when it comes to the third import, _bootswatch.scss. This is because the first two files are independent. I think there are dependent variables in the third file but on each import they are somehow scoped differently and hence the last import does not have access to the variables. This is not the case for method 1, they are all imported to a single file and then node-sass takes care of them.
Any ideas how to solve the issue?
As far as I know, you have to choose the first one if you want to use the scss versions of the bootswatch themes to override some variables or whatever you want to do with them. The scss files will be preprocessed and converted into one single css file. So when you import an scss file in a js file the scss file will be converted into a normal css file and that will be imported into your js file at the end of the whole process. Therefore, the variables scss file will be a single css file that cannot visible from a different file. That is why you have to import the variables inside an scss file, to be availabe in build time. (Also, the _ shows you in the filenames those files are partials).
I use the bootswatch themes as well a lot and I always use them as you described in your first option, import all of them inside my own index.scss file or whatever and then that file can be imported inside any js file:
// here goes my personal variables
#import "./themes/[theme_name]/variables";
#import "~bootstrap/scss/bootstrap";
#import "./themes/[theme_name]/bootswatch";
Check the offical sass guide site, preprocessing section: https://sass-lang.com/guide
I'm looking for a way to watch changes on files (sass files precisely) and execute a loader on other files (js files) with webpack.
The goal is to detect sass changes and recompiling all the javascript files with the babel-loader, because they might import it through the styled-jsx plugin.
I'm stuck in the "loader" concept and can't figure out how to get other files when testing for /.scss$/
You don't need to do anything by yourself if you using scss modules with webpack (more about module concept in the webpack docs.
What webpack does - it starts at entry point (you can specify one or multiple entrypoints, if you don't, default src/index.js would be used). And then builds dependency trees between modules (which can have any file extension as long as there's a specific loader that can turn file into module). Webpack then watches all files and rebuild all modules that have a dependency on changed file. So, if you import the .scss file in, let's say, your entrypoint
import './styles.scss';
// ...
It would rebuild automatically when styles.scss changes
You need to import your .scss file(s) under one of your .js files so that webpack actually picks up the changes.
Then, all loaders you have configured will be applied automatically based on which file type they should target.
I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors "can't resolve the dependencies" like fonts.Exist other way more efficient and "more right" for the angular standards like through angular-cli.json or something else??
I have searched everywhere how I do this but no luck.
Firstly generate new component and you can use this component to design your own template and to add own CSS
as follow:-
firstly generate new component ng g component mycomponent
new component will be created like below :-
mycomponent
mytest.component.css
mytest.component.html
mytest.component.spec.ts
mytest.component.ts
then you can add your styles at .CSS file, your all template at .html file and all logical content at .ts file
you can add this component at index.html
<app-mycomponent></app-mycomponent> // app-yourcomponent name
when you create the project i wonder you have a src folder. Inside this folder you have an assets folder: here you can paste all the code and images from your html code.
Next, you have these options:
Import the static files of your html theme one by one on the index.html in this way:
and so on..
In your angular-cli.json file:
"scripts": ["../src/assets/js/jquery.min.js"],
and so on with all your code scripts. The css styles have a styles array in the same angular-cli.json file.
Last but not least, if your html theme have images and other static content incorporated, you can access all this content in this way:
<img src="../src/assets/images/logo.png" alt=""></a>
so, you access the local folder of any file with ../ and if you want to access a superior folder you can use ../../ and so on until you get in the root folder.
I'm trying to split my server in multiples files, and actually I want to make cmdb_login.js and main.js.
The thing is that I don't know and I don't find how to say in main.js, use cmdb_login.js.
I have tried import './cmdb_login.js';
My app structure is:
If you need the code of the two .js files just ask me.
Thank you for the help
As always, Meteor combines all files eagerly, unless they are placed in a path which includes a folder named imports.
I.e. in your case, your cmdb_login.js will be combined (and then executed) before main.js in the server JavaScript code.
A proper way is to put almost all your files in an imports folder, and explicitly call them in a single main.js file (or whatever its name, provided that it is not in an imports folder), using an import statement like the one you tried (e.g. import './imports/cmdb_login.js').
I've got a preamble.lessimport file with definitions of standard colors, sizes, mixins etc. that I import in all other .less files. So far, the file was placed in /client and I included it with
#import '/client/preamble.lessimport';
Worked as a charm.
Now, I'm moving all styles to a smart package to make them reusable. How do I include the preamble now?
I've tried putting it as preamble.lessimport in the main package dir and then including with both
#import '/preamble.lessimport';
and
#import 'preamble.lessimport';
Both result in the compile error:
While building package `theme`:
input: Less compiler error: '/preamble.lessimport' wasn't found
Placing the file in a subfolder didn't help. The file is added in package.js and I use less package in both client and server.
How can I properly import that file?
Edit:
I've worked around this issue by importing via relative path:
#import '../../../preamble.lessimport';
However I'm not happy with that solution as the package is on early stage and files inside tends to move a lot. Is there any absolute path I could use?
As of meteor 0.7 you no longer use the .lessimport extension. Your less files should have the .import.less extension.
Take a look at how the bootstrap3-less project imports bootstrap for best use examples.