Skip to content

Instantly share code, notes, and snippets.

@Soben
Created August 18, 2023 20:10
Show Gist options
  • Save Soben/a28b91bcd858e98bfc0d755d444971aa to your computer and use it in GitHub Desktop.
Save Soben/a28b91bcd858e98bfc0d755d444971aa to your computer and use it in GitHub Desktop.
Can someone explain how sass is compiling here??
import $ from "jquery";
import '../scss/main.scss';
// jQuery HoverIntent
import hoverintent from 'hoverintent';
window.hoverintent = hoverintent
// Alpine JS
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.plugin(collapse);
Alpine.plugin(focus);
Alpine.start();
// Modules
// import exampleModule from './modules/example';
window.addEventListener("load", () => {
// exampleModule();
});
{
"name": "hc_wp_theme",
"version": "1.0.0",
"main": "assets/js/main.js",
"repository": "https://github.com/happycog/wordpress-bootstrap",
"author": "Happy Cog / Chris Lagasse <chris@happycog.com",
"license": "MIT",
"private": true,
"scripts": {
"build": "vite build",
"dev": "vite build --watch"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"postcss-import": "^14.1.0",
"postcss-nested": "^6.0.1",
"vite": "^4.1.1"
},
"dependencies": {
"@alpinejs/collapse": "^3.12.2",
"alpinejs": "^3.12.0",
"hoverintent": "^2.2.1",
"jquery": "^3.6.3"
}
}
module.exports = {
plugins: [
require('postcss-nested'),
require('autoprefixer'),
]
}
export default ({ command }) => ({
base: "/wp-content/themes/kcrw-giveaways/assets/dist/",
build: {
assetsDir: "",
emptyOutDir: true,
manifest: false,
outDir: "./assets/dist/",
rollupOptions: {
input: {
main: "./assets/src/js/main.js",
},
output: {
entryFileNames: `js/[name].js`,
chunkFileNames: `js/[name].js`,
assetFileNames: (assetInfo) => {
let folder = 'static/';
let extType = assetInfo.name.split('.')[1];
if (/ttf|woff|woff2/i.test(extType)) {
folder = 'fonts/';
} else if (/css/i.test(extType)) {
folder = 'css/';
}
return `${folder}[name].[ext]`;
}
}
}
}
});
@Soben
Copy link
Author

Soben commented Aug 18, 2023

More information:

I wanted to strip out tailwind and add sass, and while doing so, I was having a lot of issues (because I also removed postcss). However, there's nothing here that would tell postcss to properly handle (or even TRY to handle) sass, but it seems to take it into account when processing.

This... wasn't expected. I do not understand why.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment