In a NativeScript app I'm trying to apply some global styles that will be shared across the app.
This is my structure:
- styles
- partials
- _buttons.scss
- _exports.scss
_buttons.scss:
.flt-btn {
border-radius: 35px;
}
_exports.scss:
#import '_buttons.scss';
app.css:
#import './styles/partials/_exports.scss';
As you can see the the styles for .flt-btn should be applied, but they're not.
I'm using the class in a feature module that's lazy loaded, login like this:
<Button class="flt-btn" text="A button"></Button>
If I put the btn styles directly in app.css without any imports it works, but since this is a css file I can't use scss in it. So I'm not sure if the imports will ever work by doing it like this.
How can I make sure that the styles from the partials imports are applied application-wide?
EDIT:
I found this, which successfully imports my own styles into app.android.css and app.ios.css files. BUT.. After I've installed SASS and done this the app is just completely blank when I run it in the emulator, both in android and ios.
I get no errors, nothing. Has anyone successfully been able to get sass working like this? Please let me know how and thou shalt be rewarded.
EDIT 2:
It looks like the app is running, because I can successfully log something in the app.component.ts's constructor, so I'm guessing that something is causing all the elements on the page to disappear with the new styles settings.
I found this guide: https://docs.nativescript.org/ui/theme#sass-usage
Which is the correct way to go about this. This will create a scss/css file for android and ios as well as creating an _app-common.scss file which you can use to import your own custom styles into. This will then be applied to the android and ios css.
Strangely enough the component scss works without installing sass like above. But after installing sass you can no longer reference the scss file in the styleUrls property of a component, it should now instead link to the css file. Why this is I haven't been able to figure out, but I guess it's not a big deal since it at least works.
The answer provided by #tay hua is incorrect, as it refers to the angular-cli rather than the nativescript-cli, so if you're like me and got stuck on this, this is the answer you should be looking at.
Related
I just committed and pushed a minor CSS tweak. On my server I git pull, npm run build, and forever restart __sapper__/build
Now there seems to be more than one version of the same CSS rule across different files, as per the below screenshot (this is after disabling browser cache):
The correct rule is the third one (vertical-align: top; margin-top: 1px;), which seems to be a combination of CSS files.
Any idea where the 'old' rules are coming from? Cached somewhere somehow?
/EDIT This is my rollup.config.js: https://gist.github.com/Bandit/bbcfd6c70ace5800765313dfe6021854
/EDIT2 The styles in question are in a /style/global.scss file, which is included using the following code in /routes/_layout.svelte:
<style lang="scss" global>
#import "./style/global.scss";
main {
background-color: white;
padding: 5rem 1rem 0 1rem;
}
</style>
Guessing this is somehow the issue? Where is the right place to 'inject' global stylesheet for colours/theme/typography etc?
/EDIT3 The styles being included via _layout.svelte are being included more than once in dev as well, here's a screenshot:
These selectors don't seem to come from a Svelte component, since they're not scoped (e.g. .split-button.svelte-a9ylb1)? Or are you using :global(.split-button) in a Svelte component?
Anyway... I failed to reproduce your issue, but my intuition is that your problem probably comes from the postcss plugin. It has an inject option that is enabled by default. What this option does is injecting a <style> tag in the <head> of your doc; the code that does this is appended to your modules' JS by the postcss plugin. This behaviour might very well clash with what svelte-preprocess or rollup-plugin-svelte is doing.
Try adding inject: false in the 3 places where you're using postcss in your Rollup config, and see if this helps.
Another possibility might be the service worker. I don't think an issue there could produce your result you get, but we never know... You should try options like "Update on reload" and "Bypass for network" (I don't know what are the equivalent options in your browser) to see if that makes a difference.
Otherwise, you may have to show more of your code. Where does this precise CSS rule come from (e.g. style tag in a Svelte component, SCSS file in node_modules, ...)? How is it imported into your project (e.g. import './app.css', #import './app.scss', etc.), and where? Also, I'm surprised that you have the postcss rollup plugin only in the server (the one that is not registered in sveltePreprocess)... What do you need this for, that you don't need on the client?
EDIT: Follow up
Wait, what? You've got some style files under your routes directory?? routes/style/global.scss?
Even with that, I don't appear to be able to reproduce your problem, but it's worth noting that Sapper will try to include every file it encounters under this directory. If you've got a plugin that lets you import *.scss files, then Sapper will actually see a global.scss.js, so it will think it's a server route. Without a plugin that can eat SCSS, it should... crash. If the plugin in question is postcss with its default inject option still to true, to me it looks like a star suspect...
Anyway, some further points of clarification...
svelte-preprocess enables lang="xxx", global attribute in <style global ...>, in .svelte files only.
rollup-plugin-postcss can additionally be added, directly in plugins array (i.e. not as an option of svelte plugin). It gives support for import './foo.scss', in .js files, as well as in the <script> part of .svelte files.
(Of course, SASS support by PostCSS, or PostCSS support by Svelte preprocess are depending on the config you feed them.)
OK. So now there are multiple places where some CSS / SCSS can enter your build. That I can think of, there are the following ways:
<link rel='stylesheet' href='global.css'> in src/template.html: this one will copied as is without processing.
I suppose you can also have such a "custom" <link> tag in the markup (~HTML) part of a .svelte file, and it would be included as is in the resulting HTML (you'd still have the responsibility that the reference CSS file be accessible at the given URL).
import 'something.css' or 'import 'something.scss'in a.jsor JS part of a.sveltefile: these will get processed by bundler & plugins, and converted to some JS code, with optionally additional assets that the JS can reference (typically, a proper CSS file is generated, and some JS code dynamically injects atag for it at runtime; another approach is to generate some JS that will inject every CSS rule in the doc). PostCSS withinject: true` uses the CSS + inject tag method.
the CSS / SCSS style that you write in the <style> part of a .svelte file will also be processed by the Svelte plugin in a similar way as described just before (preprocess option required to accept anything else than raw CSS); depending on the plugin configuration, it may also try to write a '.css' file for your application (see docs. With the emitCss option, that is apparently needed for Sapper, it should output one CSS file per component (or maybe entrypoint).
In your case, you say that you've removed rollup-plugin-postcss from your config, so the 3rd point (import css from js) should not be possible anymore.
Well... I just hope this can help you investigate further.
I've pushed a Sapper + PostCSS example on a branch on this repo. As far as I can tell, it doesn't have the issue you're describing here. So maybe you can find the problem by comparing with what you have. See this commit for the diff with the vanilla official template.
I tried to also add rollup-plugin-postcss, like you initially had in your config, in order to be able to import .scss from outside of Svelte components. But I failed to find a way to do this that don't conflict with Sapper.
EDIT 2
Oh, and just to be sure... Be sure to try a little rm -r __sapper__ && rm -r src/node_modules/#sapper (notice: node_modules under src, not the one in your project's root) before pursuing your investigation. I'm sure you've already done that, but better safe than sorry. Stale things can live in there.
I am using styled-components in a React project. So far it has been working fine, but now I want to use the react-datepicker package, which requires its styles to be imported the following way:
import "react-datepicker/dist/react-datepicker.css";
However, importing the file causes an error that says "You may need an appropriate loader to handle this file type". I know I could fix this by creating a handler for .css files, but I thought I could avoid that by using Styled Components.
My question is, is there a way to handle these type of imports with styled components? I've been loooking online for hours and can't seem to find a way.
I ended up just forking the project and changing it to use styled-components instead of needing to import the styles.
I'm trying to break up my monolithic React app into reusable parts that can be shared with other projects.
I want to extract some generic components (e.g. Button, Header, Dropdown, etc.) into my own little UI library. The problem I'm running into is how to manage the CSS. Right now, my app just has a single stylesheet that takes care of everything.
These are the solutions I have seen:
Embed the CSS styles for each component in the JS for the component itself (CSS in JS).
import or require the CSS files in the JS for the component and use webpack to bundle the CSS file for you.
I really don't love either option. I understand the appeal of co-locating the styles with the component, but I feel like: a) it clutters the component definition, and b) it fights with how CSS works (no more taking advantage of cascading styles since everything is so tightly scoped to the individual component).
And, I can't bring myself to import a CSS file. That just feels so wrong. We're not even writing javascript anymore at that point.
I realize that these aren't exactly popular opinions, but is there a 3rd option that I'm missing for getting a good old fashioned CSS file from an NPM module that I can just drop in my HTML and use? Ideally one that doesn't involve copy/pasting it from node_modules. :)
Thanks to the tip from #EmileBergeron I found the PostCSS import plugin. It can find and inline stylesheets in node_modules and in your own code.
So, my workflow will be:
npm install my-ui-library
Import the React components you want to use into your JS files import { Button } from 'my-ui-library'
Import the corresponding stylesheets into your CSS files #import 'my-ui-library/Button.css'
That way I'm importing CSS into CSS and JS into JS which feels a lot more natural to me. It might also make sense to just have one stylesheet for all components instead of breaking it up per-component, but that's a detail I can figure out later.
Then, I just need to add PostCSS into my build system to inline everything which has been pretty simple in testing.
I have a large scale application that is developed using Angular 4, there seem's to be an rendering issue exactly as mentioned in this post Angular 2 Chrome DOM rendering problems
.When I navigate using router from one component to another
, while this question has an answer already , I am still unable to solve this issue.
My Application structure is as follows :
app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)
Each of this selector imports same mixin file which is used to import #font-face , while the solution mentioned in the above mentioned post suggests to use parent component and use ViewEncapsulation.NONE , I cant do the same thing since there is a usage of the imported font face in each of these components app-home, app-main,app-sub and subsequent childs as well. When I remove the #import statement from the .less files I get an exception like
Variable #helvetica-bold is undefined
Is there a workaround to make my texts appear normally in chrome when I route from one component to another.
You need to make sure the font import is only called once.
Hence, you should remove all the font imports from the mixin file as you have already tried in your answer.
But, you also need to ensure the fonts themselves are still present once in your app where all views can access it. You probably have a file like 'app.less' or something similar, that contains styles that are available in all parts of your app. Cut the font-imports from your mixin, and instead place it in this file (make sure the path references are still valid, they might need to be adjusted). If you do not yet have such a file, you will need to create one and load it once on app start.
I currently have a web application which is using SCSS, symphony, and doctrine amongst other libraries. It's well setup and heavily structured.
We are currently attempting to use Bootstrap.css to style it visually, however it's become quite an issue as we began trying to use SASS/SCSS #import function so we could #extend bootstraps classes. However when attempting to do so, it became problematic.
#import url('/bundles/iccsrpit/sass/css/_bootstrap.scss');
The above somewhat works (the code is never actually included in the css file when looking at Firebug. I can click on the path, and it brings me to the file.
#import '/bundles/iccsrpit/sass/css/_bootstrap.scss';
Causes a complete break of the CSS file, and I'm not sure why I can't access the file in this manner.
If anyone can offer a solution to this problem, please help!
Thank you,
iRed