I try to install Tailwind CSS following the instructions on the official page.
But as I tried to input the following instruction which starts the Tailwind CLI build process, the following occurred.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
enter image description here
And it's still rebuilding even after ten minutes.
I have no idea what is going on.
Thank you in advance!
The --watch command will make it run continiously. To put an end to it just press and hold CTRL then C
In tailwind.config.js, stick to the essential folders, mine had to check thousands of plugin files before building, so updated it to limit the files to check
module.exports = {
content: [
"../views/**/*.{php,js,html}",
"../js/app/**/*.{php,js}"
],
theme: {
extend: {},
},
plugins: [],
}
Related
I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time
I am new in vuejs and I am using vuejs in laravel
this is working and showing component but after making refresh
the page what can I do to see changes with out refreshing page?
these are what I have done
in Webpack:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
in my html file:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
commands:
npm run dev
npm run watch
You want to learn how to make single page application (SPA) which does not refresh the page but update the content according to the route.
https://laravel-news.com/using-vue-router-laravel
You will have to learn vue, vue-router to make SPA. when you get some experience then learn Vuex also.
I just had the same issue and struggled for a couple of days, the problem is the webpack mix configuration: this is what worked for me, but take care to remove the host in case you're not working with Laravel Homestead, if you are just leave it as it is and change the proxy value to your site local url.
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')
.browserSync({
host: '192.168.10.10',
proxy: 'mysite.test',
open: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'resources/js/**/*.vue',
'packages/mixdinternet/frontend/src/**/*.php',
'public/js/**/*.js',
'public/css/**/*.css'
],
watchOptions: {
usePolling: true,
interval: 500
}
});
Note: I think it was a sort of a bug in NMP, but the first time I tested this config, it it didn't work. What I did was to remove the polling part, ran
npm watch-poll, stop the watching and then added again the polling settings and ran simply npm run watch and workied like a charm!
EDIT
Btw, there is small issue with this config, you have to save twice for the browser to see the changes
Hope It helps!
-Hugo
You just need to run command into your terminal:
npm install
npm run dev
npm run watch
and will see changes continuously :)
I want to setup Laravel Mix with mix.sass AND PostCss Critical CSS splitting. In the end I want two files: app.css and app-critical.css.
Unfortunately I can get this to work. One of the setups (webpack.mix.js) I did try:
mix
.js('templates/src/js/app.js', 'web/assets/dist/')
.js('templates/src/js/home.js', 'web/assets/dist/')
.extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
.sass('templates/src/scss/app.scss', 'web/assets/dist/')
.sourceMaps()
.options({
postCss: [
require('postcss-critical-css')({
preserve: false,
minify: false
})
]
})
.browserSync({
proxy: '127.0.0.1:8080',
files: [
'templates/**/*.twig',
'templates/src/js/**/*',
'templates/src/scss/**/*'
]
});
if (mix.inProduction()) {
console.log("In production");
mix.version();
}
When I run the script via 'npm run watch' I get an error:
10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
Also, my file is just copying over all the critical styling. The file grows bigger and bigger, expanding the duplicate code everytime the input SCSS/CSS-file changes.
I did try to set up Laravel Mix + mix.sass + one of the following plugins:
https://github.com/zgreen/postcss-critical-css
https://www.npmjs.com/package/postcss-critical-split
Without success :(
Anybody with a working setup or link to an example repository?
Thanks,
Teun
Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap integration. Used this command to generate my css from sass.
npm run dev
Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.
src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);
If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:
$icon-font-path = "../fonts" - but npm gives error.
By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"
Copied fonts folder inside puclic/css folder, didn't work.
Added options to the webpack.mix.js file:
options({processCssUrls: false})
and in _variables.css again set:
$icon-font-path = "../fonts"
Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.
Also, I followed this question, but couldn't find any answer, all solutions didn't work.
glyphicons not showing with sass bootstrap integration
Finally, found the solution. In webpack.config.js set:
publicPath: '../'
instead of Mix.resourceRoot
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: Mix.resourceRoot
}
},
I have elixir set up to watch changes in .scss files, but changes in _partials.scss are not being watched.
elixir(function(mix){
mix.browserSync([
'resources/assets/bower/bootstrap-sass/assets/**/*'
], {
proxy: 'site.app',
reloadDelay: 200
});
});
When I edit the bootstrap/_variables.scss, gulp does compile those sass changes. If I exit gulp watch, and gulp watch again, then those changes appear.
So I know its compiling correctly, its just somehow not watching those partial files.
Any ideas? Thanks in advance!
This is already in a pull request on the repo. (https://github.com/laravel/elixir/pull/377)
Until fixed, I'm gonna apply the same fix for now as Ricardo (see https://github.com/ricardogobbosouza/elixir/commit/948abb930e0d822a6fa6a8531d52a8d51632c59b)