I want to generate my CSS-Files from Less-Files via LessCss-Gradle-Plugin (https://github.com/obecker/gradle-lesscss-plugin).
In my build.gradle I added the webjar-dependencies for bootstrap and so on..
dependencies {
implementation project(':pet-clinic-data')
implementation 'org.springframework.boot:spring-boot-starter-actuator:2.3.2.RELEASE'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf:2.3.2.RELEASE'
implementation 'org.springframework.boot:spring-boot-starter-web:2.3.2.RELEASE'
implementation 'org.projectlombok:lombok:1.18.12'
annotationProcessor 'org.projectlombok:lombok:1.18.12'
implementation 'org.webjars:webjars-locator-core:0.45'
implementation 'org.webjars:jquery:2.2.4'
implementation 'org.webjars:jquery-ui:1.11.4'
implementation 'org.webjars:bootstrap:3.3.6'
runtimeOnly 'org.springframework.boot:spring-boot-devtools:2.3.2.RELEASE'
testImplementation 'org.springframework.boot:spring-boot-starter-test:2.3.2.RELEASE'
compile group: 'org.springframework', name: 'spring-tx', version: '5.2.8.RELEASE'
}
And my lesscss-Task:
lesscss {
source = fileTree('src/main/less') {
include '**/*.less'
}
dest = "$buildDir/resources/main/static/resources/css"
dependencies {
compile 'org.webjars:bootstrap:3.3.6'
compileClasspath 'org.webjars:bootstrap:3.3.6'
}
}
I have some less-Files that require Elements from classes in the bootstrap-webjar (for example: label-success). I have the webjar in my external dependencies, but how can I use the #Import-Statement to link to that?
I tried something like:
#import "classpath: resources/webjars/bootstrap/3.3.6/less/bootstrap.less";
#import "classpath:META-
INF/resources/webjars/bootstrap/3.3.6/less/bootstrap.less"
Related
Goal
I'd rather enjoy using Sass in the Saber framework, which it supports. Here are the docs for it if you wish. Simple, right?
Problem
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
My code is extremely vanilla at this stage.
Context
I did this:
yarn add sass-loader sass --dev
And initially did that:
// saber-config.js
module.exports = {
build: {
loaderOptions: {
sass: {
data: `#import "#/scss/main.scss";`
}
}
}
}
...which resulted in no styles. M'kay. So I removed that part and imported the styles directly into the layout component, like so—
<!-- layouts/page.vue -->
<style lang="scss">
#import url('../scss/main.scss');
</style>
That's the point at which the aforementioned error occurs. What's also interesting is that if I move the Sass code from main.scss to the page.vue <style> tags, it works.
Turns out is was a Sass version issue. I resolved it by bumping down a version.
"devDependencies": {
"saber": "^0.11.7",
"saber-plugin-feed": "^0.4.3",
"saber-plugin-query-posts": "^0.4.6",
"sass": "^1.22.12",
"sass-loader": "^8.0.0"
}
I am writing a springboot to integrate with cordaapp and building with gradle. I want to call CordaRPC in springboot. Though i am able to build i am getting this below error always,
java.lang.ClassNotFoundException: javax.json.JsonValue
at java.net.URLClassLoader.findClass(URLClassLoader.java:381)
at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:331)
at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
at net.corda.nodeapi.ArtemisTcpTransport$Companion.tcpTransport(ArtemisTcpTransport.kt:84)
at net.corda.nodeapi.ArtemisTcpTransport$Companion.tcpTransport$default(ArtemisTcpTransport.kt:44)
at net.corda.client.rpc.CordaRPCClient.<init>(CordaRPCClient.kt:108)
at net.corda.client.rpc.CordaRPCClient.<init>(CordaRPCClient.kt:83)
at net.corda.client.rpc.CordaRPCClient.<init>(CordaRPCClient.kt:83)
at net.corda.client.rpc.CordaRPCClient.<init>(CordaRPCClient.kt)
for the line,
CordaRPCClient rpcClient = new CordaRPCClient(rpcAddress);
Snippet of my build.gradle file,
... apply plugin: 'java' apply plugin: 'org.springframework.boot' apply plugin: 'io.spring.dependency-management' apply plugin: 'net.corda.plugins.cordapp' apply plugin: 'net.corda.plugins.cordformation' apply plugin: 'net.corda.plugins.quasar-utils' ... dependencies {
testCompile "junit:junit:$junit_version"
// Corda integration dependencies
cordaCompile "$corda_release_group:corda-core:$corda_release_version"
cordaCompile "$corda_release_group:corda-finance:$corda_release_version"
cordaCompile "$corda_release_group:corda-jackson:$corda_release_version"
cordaCompile "$corda_release_group:corda-rpc:$corda_release_version"
cordaCompile "$corda_release_group:corda-webserver-impl:$corda_release_version"
cordaRuntime "$corda_release_group:corda:$corda_release_version"
cordaRuntime "$corda_release_group:corda-webserver:$corda_release_version"
testCompile "$corda_release_group:corda-node-driver:$corda_release_version"
// CorDapp dependencies
// Specify your cordapp's dependencies below, including dependent CorDapps
cordapp "$corda_release_group:corda-finance:$corda_release_version"
compile group: 'org.apache.logging.log4j', name: 'log4j-api', version: '2.11.0'
compile group: 'org.apache.logging.log4j', name: 'log4j-core', version: '2.11.0'
compile group: 'org.apache.logging.log4j', name: 'log4j-slf4j-impl', version: '2.11.0'
// implementation 'org.springframework.boot:spring-boot-starter-data-jpa' // implementation 'org.springframework.boot:spring-boot-starter-jersey'
implementation ('org.springframework.boot:spring-boot-starter-web', {
exclude group: 'org.springframework.boot', module: 'spring-boot-starter-logging'
exclude group: 'org.springframework.boot', module: 'logback-classic'
}
)
testImplementation 'org.springframework.boot:spring-boot-starter-test'
implementation files('<path to my cordapp jar>')
} ...
Add the dependency
group='javax.json', module='javax.json-api', version='1.1.4'
The actual issue is apply plugin: 'io.spring.dependency-management'.
This is bumping org.apache.activemq:artemis-core-client from 2.6.2 to 2.6.4 which is where the org.apache.geronimo.specs:geronimo-json_1.0_spec:1.0-alpha-1 goes missing.
If you remove the spring plugin everything will work again.
Despite what is generated by Spring Initializr, you only need
apply plugin: 'java'
apply plugin: 'org.springframework.boot'
and you can safely remove apply plugin: 'io.spring.dependency-management'
When installing the UIKit npm package inside an angular2 cli project, how can it then be used? There are typings (#types/uikit) that I also installed, but I have no idea how to import the package into a controller to use its JS / CSS classes.
It's working for me on an angular-cli based project. It was important to me make my own theme and this is how I did it:
First install / add dependency to jquery and uikit:
npm install jquery --save
npm install uikit --save
Then edit .angular-cli.json file and add the scripts:
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/uikit/dist/js/uikit.min.js",
"../node_modules/uikit/dist/js/uikit-icons.min.js"
],
...
Now you can use UIKit wherever
import {Component} from "#angular/core";
declare var UIkit: any;
#Component({
template: `<div (click)="showAlert()">alert</div>`
})
export class OwnerComponent {
showAlert(): void {
UIkit.modal.alert('UIkit alert!');
}
}
offtopic: in the next step I explain how to configure the project to use sass / scss to make you own uikit theme
Rename the styles.css to styles.scss (don't forget to rename the file itself!)
...
"styles": [
"styles.scss"
],
...
Then you can edit style.scss to compile UIKit and make your own theme
// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;
// 2. Import default variables and available mixins.
#import "../node_modules/uikit/src/scss/variables-theme.scss";
#import "../node_modules/uikit/src/scss/mixins-theme.scss";
// 3. Your custom mixin overwrites.
#mixin hook-card() { color: #000; }
// 4. Import UIkit.
#import "../node_modules/uikit/src/scss/uikit-theme.scss";
New to sass and grunt. All my vendor related css files are in _vendor.scss.
#import "public/css/bower_components/bootstrap/dist/css/bootstrap.css";
this converted to
main.css
#import url(public/css/bower_components/bootstrap/dist/css/bootstrap.css);
i want it to be
#import "public/css/bower_components/bootstrap/dist/css/bootstrap.css";
instead of url how to do it .
cause next i want to use cssjoin to concatinate all import css into one file and cssmin using grunt.
folder structure
public ---> scss --->vendor-> _vendor.scss
public ---> css ---> bower_components --> ......
public ----> css ---> main.css
grunt tasks
sass: {
dist: {
files: {
'public/css/main.css': 'public/scss/main.scss'
}
}
},
autoprefixer: {
dist: {
options: {
map: true
},
files: {
'public/css/main.css': 'public/css/main.css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass', 'autoprefixer']
}
},
That's because apparently SASS treats CSS imports differently from SCSS imports. If you #import 'some/file.css', it will be compiled to #import url(some/file.css) because SASS wants to keep your original CSS import intact (while ironically altering it in a standard manner).
However, if you change the extension your CSS files to .scss and import them as such in your main file, the SASS compiler will do its thing and include their contents in place of the original import rule. It simply works because regular CSS syntax is also valid SCSS syntax, and it tricks the compiler into treating your import rule as an SCSS import.
Also, there seems to be no reasonably easy way to alter this behavior and apparently it's not going to change any time soon based on this ticket open since 2012 that's slowly filling up with workarounds for this exact problem.
Hope this helps!
I want to add a grunt task (specifically angular-template) to my lineman application.js file. There is some documentation found here and here. However, it just tells me to add the grunt task to loadNpmTasks. The problem is that from a fresh project created using lineman, my application.js file does not have a loadNpmTasks array, nor do the comments point out where I should put it. Both examples I have found in the documentations do not show what the application.js file should look like in it's entirety.
The application.js file should look something like this (obviously the src/dest options are not configured correctly:
module.exports = function(lineman) {
return {
loadNpmTasks:['grunt-angular-templates'],
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js'
}
}
};
};
Then to run the task:
lineman grunt ngtemplates