I am trying to use #import rule on my styles so that I can manage them in a more efficient way but unfortunately it is not working. I am getting the error below. The thing is that I see in many odoo themes that people use it. So, what is missing then? I would appreciate, if you know the solution.
Style error
The style compilation failed, see the error below. Your recent actions may be the cause, please try reverting the changes you made.
Local import './main' is forbidden for security reasons. Please remove all #import {your_file} imports in your custom files. In Odoo you have to import all files in the assets, and not through the #import statement.
Related
I'm trying to have a global .scss file that gets imported into all pages.
I have the following project structure
/src
/pages
index.js
index.module.scss
/templates
/restaurants
/hungry
hungry.js
hungry.module.scss
/styles
typography.scss
variables.scss
/package.json
gatsby-plugin-sass
node-sass
/fonts
...
I tried passing options via gatsby-plugin-sass and also exposing global styles with gatsby-browser.js using this link: Include sass in gatsby globally but no luck.
My typography.scss file
typography.scss
Passing options to gatsby-config.js
My gatsby-config.js file
Error message
Exposing global styles with gatsby-browser.js
gatsby-browser.js
hungry.module.scss
Error message
I've also tried reading the documentation:
https://www.gatsbyjs.com/docs/how-to/styling/global-css/
I'm new to Gatsby and completely out of ideas at this point. I appreciate any help.
Thank you.
The approach of using gatsby-browser.js is perfectly valid and it should work, in addition, your paths look correct to me.
Regarding your typography.scss, it clearly seems that the relative paths are not working, try adding/removing relativity using ../../path/to/fonts or ./path/to/fonts.
Another approach that may work for you, is removing the options from your gatsby-plugin-sass plugin and import it as .scss import to the desired file.
Let's say that you fix the issue with the relative paths in your typography.scss (first step). Once done, your .subtitle class file, you can simply:
#import '../../../styles/fonts/typography.scss' use it. Something like:
#import '../../../styles/fonts/typography.scss
.subtitle{
font-family: $font-medium;
}
So, summarizing. The first step should be to fix the relative font importation and then, import that file directly in the needed .scss files.
Once you comment the manifest plugin (which request a missing asset in the GitHub), it loads the fonts correctly:
Notice the K, quite unique in this typography.
Gatsby uses the path inside /pages folder to build URLs of the pages. You were putting the templates folder inside the /pages folder, causing some weird behavior. Move it outside to fix the issue.
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.
The general error: SyntaxError: Invalid or unexpected token, referencing line 1 of index.css.
This is the result of encountering CSS syntax in a CSS file that I'm trying to import for styling.
Attempted fixes and experiments:
Deleted everything out of the CSS file and exported an empty JS module. This works, verifying that the import is treating it as a JS file, not CSS.
Removing the #import statement from line 1 of the CSS file. Of course, this fails to make a difference because the remaining CSS syntax throws the same error.
Paired down the Webpack config file to eliminate the surface area of the problem. Rendering should be handled by Webpack, so the issue may reside there. Config was very basic and set to handle CSS, SASS, JS, and JSX.
Tried importing the CSS file from other file locations, including the server's app.js file.
Tried making use of ExtractTextPlugin as an bundling alternative.
Tried making use of Isomorphic Style Loader.
All in all, given the attempted fixes and tests listed above, the issue seems unrelated to Webpack per se. It's as if the server side rendering is attempting to import the CSS file before Weback gets involved.
The fix, it turns out, was to use the ignore-styles package in our server app.js file:
require('ignore-styles')
The description as listed on the repo:
A babel/register style hook to ignore style imports when running in Node. This is for projects that use something like Webpack to enable CSS imports in JavaScript.
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.
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