Message Boards
How can I create a theme contributor in 7.3.10 that uses bootstrap mixins
How can I create a theme contributor in 7.3.10 that uses bootstrap mixins
New Member Posts: 16 Join Date: 5/9/12 Recent PostsHello,
I would like to create a theme contributor in 7.3 that can use the bootstrap mixins (e.g. media-breakpoint-up(md)); these are available to use in a theme, but not in a theme contributor. Looking at the Product navigation theme contributor, it uses the @clayui/css npm module, and then imports the atlas_variables in the main scss file. I have tried copying the logic into my code, but I cannot get it to work.
Does anyone know of an example where this is done, or can tell me how I can configure my module to get it working? The examples that I have found on the clay-ui site and the docs for the liferay-npm-bundler focus on JS modules, but I want to import the atlas variables into a scss file.
Thank you,
Rob.
Disclaimer: this question was previously posted here on Slack.
RE: How can I create a theme contributor in 7.3.10 that uses bootstrap mixins (Answer)
New Member Posts: 16 Join Date: 5/9/12 Recent PostsHello,
I have just found a solution for this. For anyone else who wants to know how to do this, this is what you do:
1. Create a Theme Contributor (Liferay module project).
2. Add a package.json to your module project. I'm using atlas variables form the @clayui/css npm package:
//Package.json
{
"name": "my-theme-contributor",
"version": "1.0.0",
"dependencies": {
"@clayui/css": "latest"
}
}
3. Import the files into your build.gradle cssBuild task:
//build.gradle
dependencies {
cssBuilder group: "com.liferay", name: "com.liferay.css.builder", version: "3.0.2"
}
repositories {
maven {
url "https://repository-cdn.liferay.com/nexus/content/groups/public"
}
}
buildCSS {
dependsOn ":yarnInstall"
imports=[
new File(npmInstall.nodeModulesDir, "@clayui/css/src/scss")
]
}
Note: We are using yarn as a package manager. The line 'dependsOn ":yarnInstall" ensure that the npm package is installed before running the CSS builder. If you are using npm as a package manager I think it would be 'dependsOn ":npmInstall".
4. Import 'atlas-variables' into your scss file:
// main.css
@import 'atlas-variables';
body {
background-color: lightblue !important;
@include media-breakpoint-up(md) {
background-color: blue !important;
}
}