I am using laravel5.4 with vuejs2 to build a small project. I have just started learning vuejs2 with laravel. Using laravel-mix to compile my assets. In laravel-mix documentation i can't seem to find a way to add my own plain css file to be merged and watched.
I have my own css rules in public/css/custome.css file. what should i write in the webpack.mix.js file so that my this file is included and watched by laravel mix? Currently i have below lines in the file:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Move your custom CSS file into resources/css folder and write the configuration below in webpack.mix.js
Note: You probably won't have a css folder in resources, so just create one.
mix.styles([
'resources/css/custom.css'
], 'public/css')
I found a solution on Laracast and it worked for me.
Here are the steps :
Save the content of public/css/custome.css in resources/assets/sass/_custome.scss
You have to change the file extension to .scss and add an underscore at the beginning.
The underscore will be useful when importing in your main app.scss file.
Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :
/* importing _custome.scss from the same directory containing the following files
resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
// import _custome.scss
#import "custome";
// import _variables.scss (custom variables for bootstrap-sass)
#import "variables";
// importing bootstrap-sass from node modules (if you are using bootstrap)
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Include this in your webpack.mix.js file
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Compile with
npm run dev
That's all.
Related
We have rollup based project using postcss to transform our CSS and bundle it with the project. We are using an external library where we need to import a CSS file from as well. This file, while needs to be bundled with our package, shouldn't have there classNames transformed. I tried to to import the css as follow but this has no effect:
:global {
#import 'rc-slider/assets/index.css';
}
I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.
I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).
For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?
The current documentation is not very precise about this. There are actually two cases:
Importing CSS from existing packages
You can pretty easily import CSS files from other Node-modules using the require() function:
import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render
fun main() {
require("bootstrap/dist/css/bootstrap.css")
render(document.getElementById("root")) {
h1 { +"Hello"}
}
}
For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.
Incorporating your own CSS into the Webpack build
This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:
Create webpack.conf.d directory in project's root and put inside some JS file containing:
config.resolve.modules.push("<your_stylesheet_dir>");
This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.
Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:
task("copyStylesheets", Copy::class) {
from(kotlin.sourceSets["main"].resources) {
include("styles/**")
}
into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
// kotlin { js { moduleName = "xyz" }} has to be set for this to work
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
dependsOn("copyStylesheets")
}
Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.
My build:
kotlin("js") version "1.7.20"
index.html
<link rel="stylesheet" href="index.css">
index.css is in the same resource folder as index.html.
This also works for images anything else, apparently.
I am importing some custom font files into scss file for a vuejs project. When build, it creates these font-related files in /dist folder, along with app.js and app.css files. The files include font-name.ttf, font-name.woff, font-name.woff2 and font-name.svg
I want to embed these font files in app.css file as in base64 data uri when project build.
There is an npm package named base64-inline-loader and this seems to be a good choice for my problem.
The documentation of the package indicates a method of using it with webpack config. Since my project is using vue-cli 3 and vue-cli-service to run build commands, I know I need to use vue.config.js file to properly config base64-inline-loader.
I am not a big webpack expert and only knows basic concepts of it. I am having trouble in configuring the package in vue.config.js file.
Hope there is somebody who already has some experience of using the same package preferably in Vue.js project.
Please provide me with the vue.config.js file that works :)
As seen from default Vue CLI webpack config, webpack processes font through url-loader:
webpackConfig.module
.rule('fonts')
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.options(genUrlLoaderOptions('fonts'))
So first off you need to delete previous loaders applied to that rule, and set up needed(base64-inline-loader).
module.exports = {
chainWebpack: config => {
const fontsRule = config.module.rule('fonts')
// clear all existing loaders.
// if you don't do this, the loader below will be appended to
// existing loaders of the rule.
fontsRule.uses.clear()
config.module
.rule('fonts')
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use('base64-inline-loader')
.loader('base64-inline-loader')
.tap(options => {
// modify the options...
return options
})
.end()
}
}
P.S. Helpful links:
Related question.
Replacing Loaders of a Rule.
Adding a New Loader.
I have used vue cli to create a custom vue project. I included router and vuex. I have bootstrap.min.css and styles.css in src/assets/css/
in my App.vue styles tag I use the following:
#import './src/assets/css/bootstrap.min.css';
#import './src/assets/css/styles.css';
when I do npm run serve, these files are served as html. It feels like I have tried a million variations of this import path but nothing works. I have wrapped it in a URL, I have 'required' it in main.js. Nothing works.
This should work if you are pulling it from node_modules:
#import "~bootstrap/scss/bootstrap";
check how I did it here.
I tried importing the files in my main.js file instead of the app.vue tags and noticed errors along the lines of 'couldn't find modules … /assets/img/bg1.jpg' etc etc. Turns out that all the asset path within my styles.css files needed correcting before it would work.
Thanks to everyone who assisted!
I have a set of scss file that I package as a library for reuse in several other web applications. I am aware that in my package.son for js files, I can specify the entry point in main property. Not sure how to specify this for scss file libraries. I have a main.scss that includes all the scss files that I developed and that imports the thirdparty sass files that need. I looked up how bootstrap the scss files and found that they don't really mention the main stylesheet in the package.json.
Do I need to define the main property in the package.json or leave it documented on how the scss files need to be resolved from node_modules?
If you're using node-sass (or something that depends on node-sass) to compile your sass then you can use sass-module-importer to import your own main.scss.
In your repository with your main.scss file you just need to set the "style" or "main" property in your package.json to point to your main.scss file (example here: https://github.com/bameyrick/sass-helpers/blob/master/package.json).
If the third party scripts you import into your main.scss file do not have a style or main property in their package.json, then the imports in your main.scss file will need to point to that file from the node_modules folder (e.g. #import './node_modules/third-party-lib/src/index.scss') because sass-module-importer will not be able to resolve that dependency for you.