1. Home
  2. Development
  3. RE: How can I create a theme contributor in 7.3.10 that uses bootstrap mixins

RE: How can I create a theme contributor in 7.3.10 that uses bootstrap mixins

Jamie Sammons, modified 4 Years ago.
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 Posts

Hello,

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.

Rob Hazel, modified 3 Years ago.
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 Posts

Hello,

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;
    }
}