Wikimedia Developer Support

Loading CSS with ResourceLoader [SOLVED]

special-pages
extensions

#1

I am creating my first extension which adds a new page called Special:WikiActivity. So far, I have managed to create the page and fill it with HTML content. Now I want to add CSS. I have followed the instructions on this page and looked at the code of other extensions but my CSS is not being applied. Here are some excerpts from my files:

extensions.json:

"ResourceModules": {
	"ext.WikiActivity": {
		"scripts": [],
		"styles": "WikiActivity.css",
		"messages": [],
		"dependencies": "oojs-ui"
	}
},

"ResourceFileModulePaths": {
	"localBasePath": "",
	"remoteExtPath": "WikiActivity"
}

WikiActivity.css:

a.wa-title {
    font-weight: bold;
}

WikiActivity.php:

function execute( $par ) {
	$output = $this->getOutput();
	$output->addModuleStyles ( 'ext.WikiActivity' );
	...
}

If I open the developer console in Chrome and add the contents of WikiActivity.css to a new style rule, I can confirm that it works. So I know that the styling is being added to my HTML elements and I am using the correct CSS rule. What am I doing incorrectly?


#2

Probably the ResourceFileModulePaths settings are wrong. Is your code available somewhere?

(Also you don’t need the [] lines in your resource definition, although no harm in them either.)


#3

I have my ResourceFileModulePaths set up exactly like other extensions, except the CSS files are not located in a /resources subdirectory. Here is a gist containing all of the files in my top-level directory, excluding i18n: https://gist.github.com/PukupukuDragon/1da7ea60f4f25dc44580a9aaa9bdb6a2


#4

Nothing there jumps out as incorrect. Try loading a page with ?debug=1 and check the source for a stylesheet link with modules=ext.WikiActivity. Is it present? Does it contain the correct CSS or an error message?


#5

When I load the page with ?debug=1, I can see all of the oojs-ui stylesheets that are loaded in. But if I search for ext.WikiActivity it is listed absolutely nowhere in my page’s source.


#6

I think addModuleStyles has some weird limitations… maybe try loading it with addModules instead. (Note that will probably load it via Javascript, so it will be added to the DOM tree but not the original page sourse.)


#7

I looked more closely at the documentation and noticed what I was doing wrong. This section says that if you want to call addModuleStyles, the module can only contain CSS. I had oojs-ui listed as a dependency in the module which prevented it from loading.