A real-world boilerplate for Craft CMS 3 projects that leverages Wepback 5, Tailwind 2, PostCSS 8, and has a hot-reload dev environment. Now with dynamic imports, asynchronous chunk loading, and legacy vs modern browser support!
License: MIT License
Is there a way to trigger a recompile when the tailwind.config.js changes? It's super quick as it is, which is great but it would be nice if it could re-trigger maybe with a command?
Running yarn dev only emits the files manifest.json and stats.json, and not creating js/css folders nor any any assets.
// manifest.json
{
"app.js": "/js/app.js",
"chunk-vendors.js": "/js/chunk-vendors.js",
"app.js.map": "/js/app.js.map",
"chunk-vendors.js.map": "/js/chunk-vendors.js.map"
}
Hi I was trying to test out tailwind css but the javascript file is not buildings a css file. When I enter yarn dev, it only builds the app.js and the chunk-vendors.js file.
yarn build - actually creates a css file but it strips out all the tailwind css.
Do you have any suggestions on how to fix this problem?
I'm not sure why but I'm encountering the following issues:
yarn build seems to successfully apply the css/js in the src folder and create web/dist/js and web/dist/css accordinglyyarn dev gives the following:(node:55848) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argumen
t need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wds｣: Project is running at http://localhost:8080/ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/andrew/Sites/ahra/src, /Users/andr
ew/Sites/ahra/web/dist, /Users/andrew/Sites/ahra/templates
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: asset chunk-vendors.bundle.js 916 KiB [emitted] (name: chunk-vendors) (id hint: vendors)
asset app.bundle.js 148 KiB [emitted] (name: app)
asset manifest.json 82 bytes [emitted]
Entrypoint app 1.04 MiB = chunk-vendors.bundle.js 916 KiB app.bundle.js 148 KiB
runtime modules 27.2 KiB 13 modules
modules by path ./node_modules/ 348 KiB
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB 12 modules
modules by path ./node_modules/webpack/hot/ 4.46 KiB 5 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/url/*.js 23.1 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.78 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.21 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
modules by path ./src/ 17.1 KiB
./src/app.js 64 bytes [built] [code generated]
./src/app.scss 1.64 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/app.scss 15.4 KiB [built] [code generated]
webpack 5.13.0 compiled successfully in 3793 ms
ℹ ｢wdm｣: Compiled successfully.
When I go to localhost:8080 I get the following error: Cannot GET / — when I visit the site locally using Valet at domain.test I see the website but none of the CSS is applied. Although this is in DevTools:
<script type="module" src="http://localhost:8080/app.bundle.js"></script>
<script type="module" src="http://localhost:8080/app.bundle.js" nomodule=""></script>
<script type="module" src="http://localhost:8080/chunk-vendors.bundle.js"></script>
<script src="http://localhost:8080/chunk-vendors.bundle.js" nomodule=""></script>
Any thoughts would be greatly appreciated.
Best,
Andrew
Hi I've followed all the steps and ran yarn dev but the css and js files are not genarated.
I remove the tailwind settings which purges unused css but this is what i currently get in errors
asset js/app.bundle.js 91.8 KiB [emitted] (name: app) 1 related asset
asset manifest.json 292 bytes [emitted]
Entrypoint app 1.04 MiB (998 KiB) = js/chunk-vendors.bundle.js 969 KiB js/app.bundle.js 91.8 KiB 2 auxiliary assets
runtime modules 28.4 KiB 14 modules
modules by path ./node_modules/core-js/ 442 KiB 426 modules
modules by path ./node_modules/webpack-dev-server/client/ 52.7 KiB 12 modules
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
modules by path ./node_modules/webpack/hot/*.js 5.23 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./src/ 37.1 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/url/*.js 23.1 KiB
./node_modules/url/url.js 22.8 KiB [built] [code generated]
./node_modules/url/util.js 314 bytes [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.94 KiB
./node_modules/css-loader/dist/runtime/sourceMaps.js 688 bytes [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
4 modules
webpack 5.61.0 compiled successfully in 761 msI am getting the error that this is not defined, I don't see any other code related to this other than in webpack.dev where the plugin is setup
Hmm.. Im also experiencing the same, only when running yarn build the js/css is created. I assume a configuration issue?
Originally posted by @funkysoul in #8 (comment)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.