I'm trying to make a Drupal 8 theme and no matter what I do, the stylesheet I have won't render. Here's my libraries.yml file:
global-styling:
version: VERSION
css:
theme:
css/layout.css: {}
and here's my info.yml file:
name: My Test Blog
type: theme
description: 'My test theme description'
package: Custom
core: 8.x
libraries:
- MyTestBlog/global-styling
stylesheets-remove:
- '#classy/css/layout.css'
- core/assets/vendor/normalize-css/normalize.css
regions:
header: Header
content: Content
stylesheets:
all:
- css/style.css
Any ideas?
If the path of your style sheet is correct then try to clear cache from admin panel and then check.
The problem is with your libraries.yml file (if the indentation is as shown above). Indentation is important in any yml format file and the above file will not be read correctly. Below is the correct indentation:
global-styling:
version: VERSION
css:
theme:
css/layout.css: {}
The info.yml file also contains reference to stylesheets property, which should be removed. The stylesheets property has been removed as of Drupal 8.0.0-beta11, only libraries are used now.
I solved the problem. The problem was that the name of my style directory was not the same as the name of my libraries and info files. What I mean is that before, I was doing something like naming my file "mytestblog.info.yml" and then trying to link to myblogsite/global-styling. Once I changed myblogsite/global-styling to mytestblog/global-styling, my stylesheet rendered.
Related
I'm writing a theme for WordPress, which requires comments in the CSS file as follows:
/*
Theme Name: XX
Theme URI: http://wordpress.org/themes/xxtheme
Author: X team
Author URI: http://xx.org/
Description: X theme.
Version: 1.1
Text Domain: Xdomain
*/
Whenever I compile Tailwind CSS, the whole contents of style.css gets replaced. Is there an easy way to a retain part of the CSS file?
I'm using the following command to build:
npx tailwindcss -i css/tailwind.css -o style.css
Add ! after the /* as shown in https://github.com/gregsullivan/_tw/blob/master/tailwind/custom/file-header.css
So the full solution will look like this.
/*!
Theme Name: XX
Theme URI: http://wordpress.org/themes/xxtheme
Author: X team
Author URI: http://xx.org/
Description: X theme.
Version: 1.1
Text Domain: Xdomain
*/
Thanks
Here's the solution that worked for me:
I used the PostCSS method as mentioned in the Tailwind CSS documentation and then added comments at the top of the main.css (which is the CSS folder) file. So when I compile (using
npm run dev
) the CSS the comments get copied to the output file. The package.json "scripts" tag is as follows:
"scripts": {
"dev": "postcss css/main.css -o style.css" }
You could try safelisting the comments using https://purgecss.com/safelisting.html.
I presume you are using purgecss as part of the build, but you haven’t pasted the Tailwind CSS or Webpack configuration.
I have a problem.
I'm learning laravel 8 and tailwind CSS.
and as title vscode tailwind CSS Intellisense not working.
My tailwind CSS version is 2.2.15. tailwind.config.js like the photo.
enter image description here
output no error
enter image description here
so what can I do about this issue?
Tailwind CSS IntelliSense extension doesn't work until you have a configuration file in your workspace, as its description clearly states!
You'll be fine even if you're just using the CDN, but you have to create a tailwind.config.js file in your project's root directory, containing the defaults at least:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Also, and since you're working with Laravel, I guess you need to add Blade files to be recognized by the extension through this VSC setting (in settings.json):
"tailwindCSS.includeLanguages": {
"blade": "html",
},
One final note: The content paths are what going to be processed by Tailwind's JIT engine; understanding it is crucial!
Possible Solution
Disable a single VS Code Extension called:
"Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets"
Evidence
Tailwind CSS IntelliSense was not working in my Angular project. I had installed Tailwind CSS using their instructions:
Click here
MY VERSIONS
VS Code: 1.62.3
Tailwind CSS: 3.0.1
Angular: 13.0.3
I disabled the extension, mentioned as my "Possible Solution" above, and Tailwind CSS IntelliSense worked instantly.
Demo of Tailwinds CSS IntelliSense in my Angular project
i had same the issue while working on tailwind with laravel.
unInstalling and reinstalling tailwind intellisense extension solved my problem.
also , dont forget to add the following in the part of your blade file :
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
For me, it seems to be an issue with one of my extensions.
I needed to uninstall the "Emmet Live" extension and install the "Mithril Emmet" extension.
As some other answers have suggested, make sure you also put the following in your settings.json:
"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false
Using '' instead of "" might work.
First time with Drupal. This should be easy. I need to add in some JS files to my sub theme globally. Cache is cleared every time when testing.
I am building off the default bootstrap theme.
Error: The website encountered an unexpected error. Please try again later.
SUBTHEME.libraries.yml
global-styling:
css:
theme:
css/style.css: {}
global-scripting:
js:
js/global.js: {}
SUBTHEME.info.yml
libraries:
- 'SUBTHEME/global-styling'
- 'SUBTHEME/global-scripting'
What am I missing here? Any help would be appreciated.
This worked for me to just add a js file
dont change
libraries:
- 'hytorc/global-styling'
global-styling:
css:
theme:
css/style.css: {}
js:
js/global.js: {}
I'm doing some UI dev in an Angular 2 (v4) project and currently have to re-run ng serve... to recompile the new styles, in order to get them to display in the app.
Is there a way to get the CSS styles to auto-compile in the same way adding html tags to a given component updates the app realtime?
It should automatically do that while serving.
Please provide more details.
Try disabling Use "safe write" in Settings of your IDE if that's a thing. It might cause that problem incidentally ( Settings | Appearance & Behavior | System Settings in Jetbrains problems)
Change Angular CLI version?
Check out your .angular-cli.json could be something in there.
There is two ways to add css file to your project:
one way add the css file to assets folderthen import the file from style.css like this
#import url('./assets/theme.css');
in this case the file will be watch to change
another way from angular.json add the css file to styles array
"styles": [
"src/assets/theme.css",
"src/styles.css"
],
notes that any change on angular.json file required to run angular server againg
{{ 'Happy Coding' }}
So I've tried to load the css on to my page, but with no luck. I used this approach https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme I am using a sub theme of bootstrap and have this in my
.libraries.yml:
global-styling:
css:
theme:
css/style.css: {}
and try to change css in style.css but doesn't work.
My .info.yml has:
libraries:
- 'SUBTHEME/global-styling'
You should rewrite the'SUBTHEME' word to your theme name. If yout theme name is bootstapsubtheme, you sould write
libraries:
- 'bootstrapsubtheme/global-styling'
Be careful, there is this "SUBTHEME" text in other files, that you sould rewrite to your themename.
And yes, like as they wrote above, you sould switch off the aggregate css and js files in the configuration-> development -> performance menu or clear all cache.
Figured it out. I had to go to admin > configuration > Development > Performance and uncheck "Aggregate CSS files".
I'd also recommend setting up theme debugging on your local environment: https://www.chapterthree.com/blog/drupal-8-theming-setting-up-theme-debugging (I'm not affiliated with them, just use it all the time).