I am trying to use a custom Aikau widget to load some css and javascripts:
/**
*
* #module /JQueryPlugins
* #extends dijit/_WidgetBase
* #mixes module:alfresco/core/Core
* #mixes module:alfresco/core/CoreWidgetProcessing
*/
define(["dojo/_base/declare",
"dijit/_WidgetBase",
"alfresco/core/Core",
"alfresco/core/CoreWidgetProcessing",
"jquery",
"jqueryui",
"jquery-chosen",
"custom-namespace",
"custom-global",
],
function(declare, _WidgetBase, AlfCore, CoreWidgetProcessing, $) {
console.log("initialising");
return declare([_WidgetBase, AlfCore, CoreWidgetProcessing, $], {
cssRequirements: [
{ cssFile: "./css/chosen.css" }
]
});
});
The packages jquery-chosen, custom-namespace and custom-global are defined in a share extension module:
<module>
<id>jQuery Plugins</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<configurations>
<config evaluator="string-compare" condition="WebFramework" replace="false">
<web-framework>
<dojo-pages>
<packages>
<package name="jquery-chosen" location="js/aikau/custom/jquery/chosen" main="chosen.jquery"/>
<package name="custom-namespace" location="js" main="custom-namespace"/>
<package name="custom-global" location="js" main="custom-global"/>
</packages>
</dojo-pages>
</web-framework>
</config>
</configurations>
</module>
The javascripts are loaded as expected and the jquery plugin "chosen" works, but its css is not loaded.
Given that this cssRequeriments import is used often in the aikau code, I am sure that it works, but I cannot see what is wrong in my code.
Do you see anything wrong ?
I was also trying to investigate why the css requirements is ignored looking the aikau source code, but I do not find there where the inclusion of the cssRequirements is implemented. Can someone tell me where to look?
Aikau widget file structure should be same as defined in image
Related
Here I am, going back to Symfony after leaving it for the past few years. Now it's using Webpack when it used to Assetic last time I touched it. So, I am a bit confused with a lot of things related to the rapidly evolving JavaScript ecosystem.
I went to Sensiolabs's website to follow instructions on how to integrate Bootstrap to my project. I went pretty far in the process as I have a link to my stylesheet on my webpage :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog index!</title>
<link rel="stylesheet" href="/build/app.css">
</head>
<body class="bg-light">
When I use the path for the css as an url : http://localhost/symfony-01/public/build/app.css
I'm getting all the styles displayed (correctly, I assume).
However, I am not getting any styling at all in the html. At first I thought I hadn't generated the build with webapp correctly but it's not the case.
So I added some silly element to the twig template and gave it a silly css as to make sure style was not overloaded or something:
in base.html.twig:
<div class="superfuzz"> HELLO GUYS</div>
And in app.css :
div.superfuzz{
background-color: green !important;
}
When I look at the css I get from url above, I can go down and find that style wasindeed added By Encore. Yet style in inspector is empty, it's not applied. I dont know why, it's a total mystery to me. The only idea I have would be that the link to the stylesheet is not correct but at the same time I am pretty new with webpack, Encore, and Yarn.
Could also mean the style in the css file is not correct. I haven't done that much SCSS to really spot if something wrong but normally webpack is converting it in correct css right?
Here is the twig version of my html header, just in case :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body class="bg-light">
Here is my webpack.config.js :
var Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', [
'./assets/js/app.js',
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.js'])
// .addStyleEntry('css/app', [
// './node_modules/bootstrap/dist/css/bootstrap.css',
// './assets/css/app.css'
// ])
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
And let me add assets/js/app.js:
import '../css/global.scss';
import '../css/app.css';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';
const $ = require('jquery');
global.$ = global.jQuery = $;
And scss file:
#import "~bootstrap/scss/bootstrap";
Content of the entrypoints.json file:
{
"entrypoints": {
"app": {
"js": [
"/build/runtime.js",
"/build/vendors~app.js",
"/build/app.js"
],
"css": [
"/build/app.css"
]
}
}
}
Ok the generated link href path was incorrect.
Thanks to #Julien B. for providing the solution.
As I am not using a virtualhost yet, my URL is following the localhost/projetfolder/public format. I had too much trust in Encore handling this right off the bat but actually I had to edit the parameter to the setPublicPath method in webpack.config.js to reflect my situation. So it must be .setPublicPath('/projectfolder/public/build') instead of .setPublicPath('/build')
Try to clear the cache when you have changed something.
I had the similar problem with this files. Symfony couldn't find this files:
http://localhost/build/runtime.js
http://localhost/build/vendors~app.js
http://localhost/build/app.js
The problem had disappeared after this:
bin/console cache:clear; npm run watch
I am trying to import "../../node_modules/react-quill/dist/quill.snow.css"; in my next.js project but I get following error
[ error ] ./node_modules/react-quill/dist/quill.snow.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
Location: components\crud\BlogCreate.js
I managed to make it work with next.config.js. It worked with this configuration
// next.config.js
const withCSS = require('#zeit/next-css');
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
});
But now I am getting a warning,
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
It seems my solution is not the best way to solve this problem. How could I get rid of this warning?
You may remove the #zeit/next-css plugin because the Next.js 9.3 is very simple. Then Next.js 9.3 is Built-in Sass Support for Global Stylesheets after removing the #zeit/next-css you may install
npm install sass
Then, import the Sass file within pages/_app.js.
Global CSS
Import any global CSS in the /pages/_app.js.
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Importing CSS in components or pages won't work with the built-in CSS support.
Component CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
components/Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
components/Button.js
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
CSS Module files can be imported anywhere in your application.
Third-party CSS on Component / Page level
You can use <link> tag in the component.
const Foo = () => (
<div>
<link
href="third.party.css"
rel="stylesheet"
/>
</div>
);
export default Foo;
The loaded stylesheet won't be automatically minified as it doesn't go through build process, so use the minified version.
If none of the options doesn't fit your requirements consider using a custom CSS loader like #zeit/next-css.
In that case you will see a warning which is fine:
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
Suggested reading:
Next.js Built-In CSS Support
Global SASS
CSS Modules
Install sass module by running following command.
npm install sass
You then need to remove all css-loader and sass-loader configuration from next.config.js.
For example, I had to remove the withSass() function (in your case withCSS()) and just return the configuration object.
Had to remove the following lines from next.config.js
{
test: /\.scss$/,
use: {
loader: "sass-loader",
options: {
data: '#import "./scss/_variables.scss"',
sourceMap: true,
},
},
}
Move your options to sassOptions in next config file.
sassOptions: {
data: '#import "./scss/_variables.scss"',
sourceMap: true,
}
Also remove the old #zeit/next-sass and #zeit/next-css from package.json
I had to remove following #zeit dependency from my package.json
"dependencies": {
"#zeit/next-sass": "1.0.1",
This worked for me.
For more details, visit https://nextjs.org/docs/basic-features/built-in-css-support
<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
Importing css like above results in this error
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
Is there really no other way loading css other than putting the whole css in the template?
The first thing you need to know is, you can't declare a html head inside any place, neither in yours tamplate, neither in yours components, neither in yours pages, neither in nowhere.
Keep in mind that you can't use a html tags for this, you will use a json schema.
take a look https://nuxtjs.org/guide/configuration for more detailed explanations.
Now about you doubt if you want to import the CSS as globally, the correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside the head we will configure all the imports.
So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
Another way, is import your css directly inside your component, for this you can do some thing like this:
<style scoped>
#import '~/assets/style/main.css';
</style>
OR
<style scoped src="#/assets/styles/mystyles.css">
</style>
In Nuxt, you will need a CSS loader instaled in your application too, so have sure you had intalled a "stylus" and "stylus-loader" in your app.
try to impot your css files in script like this :
<script>
import "#/assets/css/style-light.css";
import "#/assets/css/login-light.css";
///
</script>
EDIT: changed ~ to #
You could bring your files in using the head method like so :
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
You should also move these css files into the static folder. See this discussion on the Vue forum https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498
Situation:
Writing a Qt Quick application for embedded Linux system, want to use Qt translation mechnanism. Application shall select language on command coming in via RS232, currently hardcoded to "de" on a system set up for english language. Application loads various masks on command from RS232.
Problem:
Qt Quick translates only the main page (main.qml), but not the pages loaded via the Qt Loader (DEMO.ui.qml). Texts from main.qml are displayed in german, texts from DEMO.ui.qml are displayed untranslated.
I've added a "XX" prefix to all english translations (qml.en.ts), that also does not appear on the screen. So neither english nor german translations are loaded for pages loaded via the Qt Loader.
Clean build after lupdate, lrelease does not help. rm -rf build-$appname-*, build does not help.
Code:
application.cpp:
xlat=new QTranslator();
if (xlat->load(QLocale("de"), "qml", ".", ":/qml/i18n/", ".qm")) {
qDebug()<<"load translator ok";
bool ok=installTranslator(xlat);
//...
} // else error message
// ...
viewer->setSource(QUrl("qrc:/qml/main.qml"));
viewer->showFullScreen();
// ...
main.qml:
import QtQuick 2.0
Rectangle {
Text {
id: loadingMsg
text: qsTr("Loading ...")
// ...
}
Loader {
// ...
source: ""
function loadMask(aMaskId) {
// ...
setSource(gui.urlForMask(aMaskId));
}
}
// ...
}
components/SimpleButton.qml:
import QtQuick 2.0
// ...
Rectangle {
Text {
id: label
text: ""
// ...
}
property alias text: label.text
}
masks/DEMO.ui.qml:
import QtQuick 2.0
import "../components"
//...
SimpleButton {
//...
text: qsTr("Vent.")
}
//...
qml.de.ts:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.1" language="de_DE">
<!-- ... -->
<context>
<name>DEMO</name>
<!-- ... --->
<message>
<source>Vent.</source>
<translation>Belüften</translation>
</message>
</context>
<context>
<name>main</name>
<message>
<source>Loading ...</source>
<translation>Lade ...</translation>
</message>
<!-- ... -->
</context>
Renaming DEMO.ui.qml to DEMO.qml did the trick. I guess that the Linguist tools (lupdate, lrelease) and the Qt runtime environment have different ideas of how to convert a filename to a context name.
If I use bin/behat #FootballTeamBundle in terminal as stand-alone, the error screen-shots are taken and saved under build/behat/ folder which is fine however, if I run bin/phing then the FeatureContext file seems to be ignored as a whole so neither screen-shots taken nor its internal methods are being triggered (such as I wait for ** seconds) which is strange. Anyone know the solution to it?
I also updated the line to bin/behat -f progress --format html --out ${dir-report}/behat.html to bin/behat #FootballTeamBundle in my build.xml but nothing changed.
Thanks in advance.
/var/www/html/local/sport/behat.yml
default:
context:
class: FeatureContext
parameters:
screen_shots_path: 'build/behat/'
extensions:
Behat\Symfony2Extension\Extension:
mink_driver: true
kernel:
env: test
debug: true
Behat\MinkExtension\Extension:
base_url: 'http://localhost/local/sport/web/app_test.php/'
files_path: 'dummy/'
browser_name: chrome
goutte: ~
selenium2: ~
paths:
features: src/Football/TeamBundle/Features
bootstrap: %behat.paths.features%/Context
/var/www/html/local/sport/src/Football/TeamBundle/Features/Context/FeatureContext.php
<?php
namespace Football\TeamBundle\Features\Context;
use Behat\MinkExtension\Context\MinkContext;
use Behat\Mink\Exception\UnsupportedDriverActionException;
use Behat\Mink\Driver\Selenium2Driver;
class FeatureContext extends MinkContext
{
/**
* Where the failure images will be saved.
*
* #var string
*/
protected $screenShotsPath;
/**
* Comes from behat.yml file.
*
* #param $parameters
*/
public function __construct($parameters)
{
$this->screenShotsPath = $parameters['screen_shots_path'];
}
/**
* Take screen-shot when step fails.
* Works only with Selenium2Driver.
*
* #AfterStep
* #param $event
* #throws \Behat\Mink\Exception\UnsupportedDriverActionException
*/
public function takeScreenshotAfterFailedStep($event)
{
if (4 === $event->getResult()) {
$driver = $this->getSession()->getDriver();
if (! ($driver instanceof Selenium2Driver)) {
throw new UnsupportedDriverActionException(
'Taking screen-shots is not supported by %s, use Selenium2Driver instead.',
$driver
);
return;
}
if (! is_dir($this->screenShotsPath)) {
mkdir($this->screenShotsPath, 0777, true);
}
$filename = sprintf(
'%s_%s_%s.%s',
$this->getMinkParameter('browser_name'),
date('Y-m-d') . '_' . date('H:i:s'),
uniqid('', true),
'png'
);
file_put_contents($this->screenShotsPath . '/' . $filename, $driver->getScreenshot());
}
}
/**
* #Then /^I wait for "([^"]*)" seconds$/
*
* #param $seconds
*/
public function iWaitForGivenSeconds($seconds)
{
$this->getSession()->wait($seconds*1000);
}
}
/var/www/html/local/sport/build.xml
<!-- GLOBAL VARIABLES -->
<property name="dir-source" value="${project.basedir}/src" />
<property name="dir-report" value="${project.basedir}/build/phing" />
<!-- END -->
<!-- AVAILABLE CLI COMMANDS -->
<target name="build"
description="Runs everything in order ..."
depends="cache-clear, cache-warm, load-fixtures, codesniffer-psr2, behat-bdd" />
<!-- END -->
<!-- FILESET -->
<fileset id="sourcecode" dir="${dir-source}">
<include name="**/*.php" />
</fileset>
<!-- END -->
............. OTHER TESTS ARE HERE, JUST REMOVED TO KEEP IT CLEAN
<!-- BEHAT - BDD -->
<target name="behat-bdd">
<echo msg="Running Behat tests ..." />
<exec logoutput="true" checkreturn="true"
command="bin/behat -f progress --format html --out ${dir-report}/behat.html"
dir="./" />
</target>
<!-- END -->
I never dealt with phing nor a Symfony fan. Hopefully this is purely a config issue. Try being more specific with your paths by using %behat.paths.base%. Also make use of namespaces ;)
default:
context:
class: Football\TeamBundle\Features\Context\FeatureContext
parameters:
screen_shots_path: %behat.paths.base%/build/behat/
extensions:
Behat\Symfony2Extension\Extension:
mink_driver: true
kernel:
env: test
debug: true
Behat\MinkExtension\Extension:
base_url: 'http://localhost/local/sport/web/app_test.php/'
files_path: %behat.paths.base%/dummy/
browser_name: chrome
goutte: ~
selenium2: ~
paths:
features: %behat.paths.base%/src
bootstrap: %behat.paths.features%/Context
%behat.paths.base% is where you behat.yml sits. So update the config with it setting the correct paths relevant to it.