I’m trying to translate my Drupal 7 theme to a Drupal 8 theme.
I followed the instructions to add my CSS Javascript files by creating the file *.libraries.yml.
This is my babol_dp8.libraries.yml file:
global-scripts:
version: 1.x
js:
assets/js/bootstrap.min.js: {}
assets/js/fhmm.js: {}
assets/js/venobox.min.js: {}
assets/js/sticky-kit.min.js: {}
assets/js/cs.js: {}
dependencies:
- core/jquery
global-styling:
version: 1.x
css:
theme:
assets/cs2015.css: {}
assets/documenter_style.css: {}
assets/mobile_cs2015.css: {}
assets/style.css: {}
assets/css/bootstrap-theme.css: {}
assets/css/bootstrap-theme.min.css: {}
assets/css/bootstrap.css: {}
assets/css/bootstrap.min.css: {}
assets/css/featherlight.gallery.min.css: {}
assets/css/featherlight.min.css: {}
assets/css/fhmm.css: {}
This is my babol_dp8.info.yml file:
name: babol_dp8
type: theme
engine: twig
description: 'New Drupal 8 Twig Theme created with the help of Twigify.'
version: VERSION
core: 8.x
libraries:
- babol_dp8/global-styling
- babol_dp8/global-scripts
base theme: classy
regions:
sidebar_first: 'Left sidebar'
sidebar_second: 'Right sidebar'
content: 'Content'
header: 'Header'
footer: 'Footer'
highlighted: 'Highlighted'
help: 'Help'
content_extra: 'Extra Content Data'
Even though I followed the instructions given, my libraries cannot be loaded.
I have already emptied the cache many times after modifying the files and I don't have any modules with the same name as the theme.
I don’t understand where the problem is. I am looking forward to hearing from you soon.
Thank you
Unless it's a mistake in what you wrote here, your indentation is bad in your babol_dp8.libraries.yml file. There are 2 extra spaces at the start of each line.
global-scripts:
version: 1.x
js:
assets/js/bootstrap.min.js: {}
assets/js/fhmm.js: {}
assets/js/venobox.min.js: {}
assets/js/sticky-kit.min.js: {}
assets/js/cs.js: {}
dependencies:
- core/jquery
global-styling:
version: 1.x
css:
theme:
assets/cs2015.css: {}
assets/documenter_style.css: {}
assets/mobile_cs2015.css: {}
assets/style.css: {}
assets/css/bootstrap-theme.css: {}
assets/css/bootstrap-theme.min.css: {}
assets/css/bootstrap.css: {}
assets/css/bootstrap.min.css: {}
assets/css/featherlight.gallery.min.css: {}
assets/css/featherlight.min.css: {}
assets/css/fhmm.css: {}
Related
I'm trying to setup my storybook environment and while it mostly works fine, the viewport tab, and other options, disappear on build/start. I'm not sure what's going on here, I haven't seen any information regarding it and I've been removing features from my SB environment to fix it ... so far to no avail. Any guidance would be appreciated.
storybook/preview.js -- emptied it of all content
storybook/main.js (below)
module.exports = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions'
],
framework: {
name: '#storybook/nextjs',
options: {}
},
docs: {
docsPage: true
}
};
step for video below:
run npm run storybook
open new browser tab
while building:
after building:
module.exports = {
content: ["../../../../Views/**/*.cshtml"],
theme: {
extend: {},
},
plugins: [],
}
I am not sure how to refer to all cshtml files so that tailwindcss is reflected.
error details: warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration
I am trying to generate a static website out of my (minimal) code with Nuxt. In that code, I integrate in particular the tailwindcss toolkit as well as vue2-leaflet. Upon
nuxt generate
I get two css files, one for the tailwindcss css and the other for the leaflet css. While the former file is fine and contains everything I need, the latter is pretty sparse:
.leaflet-tile-pane{z-index:200}#-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}#keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}
Of course, that makes my map render in a pretty strange way, because most of the css is missing. Here's my current nuxt.config.js:
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
{ src: '~plugins/leaflet.js', mode: 'client' }
],
buildModules: [
'#nuxtjs/tailwindcss'
],
modules: ['#nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],
[...]
build: {
extractCSS: true,
}
}
Getting rid of the extractCSS ends up incorporating all the relevant css into the index.html. It works, but then I get the following error:
ERROR Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode
I'm not sure I understand how that whole css extraction works. Could someone enlighten me? Why is it not working with extractCSS: true? How can I make it work? Why is it working in SPA mode but not in static mode?
You are using nuxt-purgecss which is using purgecss to strip unused CSS.
purgecss do scan HTML (or vue) files for CSS classes in use and then strip unused classes from final CSS bundle.
You can take a look at default purgecss configuration used by nuxt-purgecss here. The paths lists the paths purgecss will scan for CSS usage.
Because you are not using most of the leaflet css directly (in your components), its is necessary to configure purgecss to don't remove leaflet's css.
You can do that by whitelisting (btw not sure if "comment" method will work in Vue\Nuxt)
You can read more here and here
Not tested!!
// nuxt.config.js
{
purgeCSS: {
whitelistPatterns: [/leaflet/, /marker/]
}
}
Regarding the error message
Error message is from nuxt-purgecss module - it is clearly documented here
I don't have deep knowledge of Nuxt build process. So I just assume from the docs that extractCSS: true will use extract-css-chunks-webpack-plugin to extract all CSS to separate CSS file, while (default) extractCSS: false will use PostCSS to extract all CSS and put it directly into the <style> tag of rendered page.
All of that doesn't matter IMHO because the root problem is the use of purgecss and the solution is to configure it correctly to whitelist leaflet CSS classes....
I've created a demo theme. The .libraries.yml file is below:
global-styling-and-scripts:
version: VERSION
css:
base:
assets/css/font-awesome.css: {}
assets/css/bootstrap.css: {}
assets/css/slick.css: {}
assets/css/bootstrap-datepicker.css: {}
assets/css/jquery.fancybox.css: {}
assets/css/theme-color/default-theme.css: {}
assets/css/style.css: {}
theme:
'//fonts.googleapis.com/css?family=Tangerine': { type: external, minified: true }
'//fonts.googleapis.com/css?family=Open+Sans': { type: external, minified: true }
'//fonts.googleapis.com/css?family=Prata': { type: external, minified: true }
js:
assets/js/jquery.min.js: {}
assets/js/bootstrap.js: {}
assets/js/slick.js: {}
assets/js/waypoints.js: {}
assets/js/jquery.counterup.js: {}
assets/js/bootstrap-datepicker.js: {}
assets/js/jquery.mixitup.js: {}
assets/js/jquery.fancybox.pack.js: {}
assets/js/custom.js: {}
dependencies:
- core/drupalSettings
- core/jquery
- core/jquery.once
If I deleted all the .js from this file, I see no errors in the console however, the images, and slideshows etc are not properly rendering.
This is hard to see, but check that your dependencies key in the YAML is indented correctly. It should be on the top level, and in your code it looks like it's inside the js key. This could cause it to not load the dependencies, which include the jquery.once module.
(I suggest using two spaces instead of one for indenting YAML, which is consistent with Drupal's standard and makes the indentation more visible.)
Edit: Also, note that there is a dedicated Drupal Stackexchange site at https://drupal.stackexchange.com/, where your Drupal-related questions can get more visibility.
I'm using usemin in my Grunt file.
I'd like to use purifycss.
BUT, i get this error when running grunt :
Warning: Please check the validity of the CSS block starting from the line #1 Use --force to continue.
I think it's because Font Awesome is the first library in my project and it has the following css header :
/*!
* Font Awesome 4.3.0 by #davegandy - http://fontawesome.io - #fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
So i think i should use the argument : keepSpecialComments: 0 for cssmin.
My problem is that the usemin prepare task is doing the cssmin and i don't know how to add this argument.
Any idea ?
Thanks !
To add options in the generated config of the cssmin task , you will need to use the flow option in useminPrepare.
useminPrepare: {
html: 'index.html',
options: {
flow: {
steps: {
css: ['cssmin']
},
post: {
css: [{
name: 'cssmin',
createConfig: function (context, block) {
var generated = context.options.generated;
generated.options = {
keepSpecialComments: 0
};
}
}]
}
}
}
}