If you want to make Sass import paths shorter, add node_modules/govuk-frontend to either your:
You can then import without using node_modules/govuk-frontend/ in your import path. For example:
@import"govuk/components/button/button";
Override with your own CSS
If you want to override GOV.UK Frontend’s styles with your own styles, @import GOV.UK Frontend’s styles before your own Sass rules.
Using GOV.UK Frontend with our old frameworks
If your project uses GOV.UK Frontend toolkit, GOV.UK Template or GOV.UK Elements, you can configure GOV.UK Frontend to work with them.
Silence deprecation warnings from dependencies in Dart Sass
If you’re using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. For example:
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
We’re currently unable to fix these deprecation warnings without breaking support for LibSass. However, you can silence the warnings caused by GOV.UK Frontend and other dependencies. Make sure you’re using Dart Sass 1.49.10 or greater, and then if you’re:
calling the Sass compiler from the command line, pass the —quiet-deps flag
using the JavaScript API, include quietDeps: true in the options object
Copy the font and image files into your application
If you decide to copy the assets instead, copy the:
/node_modules/govuk-frontend/govuk/assets/images folder to /assets/images
/node_modules/govuk-frontend/govuk/assets/fonts folder to /assets/fonts
You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when we update GOV.UK Frontend.
If you have your own folder structure
If you use a different folder structure than /assets/images and /assets/fonts , you can set Sass variables so that Sass builds the CSS to point to your folders.
Set one of the following before the @import line in your Sass file:
Set the $govuk-assets-path variable if your font and image folders have the same parent folder. For example:
Set the $govuk-images-path and $govuk-fonts-path variables if your font and image folders have different parent folders. For example:
$govuk-images-path:"//";$govuk-fonts-path:"//";
You can also use your own function to generate paths, for example if you’re using asset-pipeline in sass-rails. Set the $govuk-image-url-function and $govuk-font-url-function variables to the name of your function.
JavaScript
To import the JavaScript from GOV.UK Frontend, you can either:
add GOV.UK Frontend’s JavaScript file to your HTML
import the JavaScript using a bundler like Webpack
Add the JavaScript file to your HTML
If you decide to add the JavaScript to your HTML, first either:
set up your routing so that requests for the JavaScript file are served from node_modules/govuk-frontend/govuk/all.js
copy the node_modules/govuk-frontend/govuk/all.js file into your application
Then import the JavaScript file before the closing
tag of your HTML page or page template, and run the initAll function to initialise all the components.
. src="/.js">window.GOVUKFrontend.initAll()
Select and initialise an individual component
You can select and initialise a specific component by using its data-module attribute. For example, use govuk-radios to initialise the first radio component on a page:
If you decide to import using a bundler, we recommend you use import to only import the JavaScript for components you’re using in your service. For example:
If you update a page with new markup, for example a modal dialogue box, you can run initAll with a scope parameter to initialise the components on part of a page.
If your site has a Content Security Policy (CSP), the CSP may block the inline JavaScript in the page template. You may see a warning like the following in your browser’s developer tools:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'".
To unblock inline JavaScript, do one of the following:
Make sure you understand the security implications of using either option, as wrong implementation could affect your service’s security. If you’re not sure what to do, talk to a security expert.
Use a hash to unblock inline JavaScript
You can unblock inline JavaScript by including the following hash in your CSP:
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Asset paths in CSS #3582
Asset paths in CSS #3582
Comments
Webpack finds all relative module references in CSS (they start with ./) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
But what should I do if the assets are not located in the same directory as the CSS files? All my assets are in src/assets/. , but CSS files can be in other folders as well. Neither ./assets/. nor ../assets/. seems to work.
The text was updated successfully, but these errors were encountered:
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Relative static assets in CSS folder #932
Relative static assets in CSS folder #932
Comments
Just opening a new issue confirming that bug #208 still exists and @githoniel’s solution is still necessary today.
This has all to do with using relative paths in CSS files.
The text was updated successfully, but these errors were encountered:
So I tried to reproduce it, but still can’t,
Hello, I’ve a similar issue but in DEV.
When I run ‘npm run dev’, I get no errors related to the image URL path. The image simply does NOT display in the background.
After going through the issues related to this problem in detail, I tried all possible paths in hopes of getting it right:
../../assets/logo.png, ../assets/logo.png, ./assets/logo.png, /assets/logo.png, assets/logo.png, and even logo.png
but no luck. I did modify the ‘webpack.base.conf.js’ file to include the below line, as suggested by @githoniel in #208
Thank you very much, this works. Guess I have some reading to do about Webpack. 🙂
How should i use that same in vue with Typescript? `image: require(‘../../assets/logo.png’)
I’m trying to deploy into a sub folder on the production server, and using
works fine for the javascript files, however the background image urls in the styles don’t work
I’ve tried removing the absolute path / from the front of the url and also tried using ./ but nether of these will compile into a valid Vue.js application,
I’ve also tried setting the assets path in the config e.g.
setting it to ‘./’ or ‘/assets’ but this doesn’t work either, as normally the build fails
Is there a workaround for this problem ?
I’m trying to deploy into a sub folder on the production server, and using