adam/wp-73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

replace tailwind with bootstrap: initial webpack config for development

Browse source
This commit is contained in:
Adam Piontek 2021-07-02 12:51:36 -04:00
parent c2bdb112ea
commit 1388a95038
9 changed files with 86 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
assets/css/_bs-load.scss Normal file
View file

@ -0,0 +1,50 @@
/* Bootstrap custom variable overrides */
@import "bs-custom";
// Required || Configuration
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
/* Bootstrap custom variable overrides */
@import "bs-colors";
// Required || Configuration -- CONTINUED
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
// Optional || Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// @import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
// @import "../node_modules/bootstrap/scss/dropdown";
// @import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
// @import "../node_modules/bootstrap/scss/card";
// @import "../node_modules/bootstrap/scss/accordion";
// @import "../node_modules/bootstrap/scss/breadcrumb";
// @import "../node_modules/bootstrap/scss/pagination";
// @import "../node_modules/bootstrap/scss/badge";
// @import "../node_modules/bootstrap/scss/alert";
// @import "../node_modules/bootstrap/scss/progress";
// @import "../node_modules/bootstrap/scss/list-group";
// @import "../node_modules/bootstrap/scss/close";
// @import "../node_modules/bootstrap/scss/toasts";
// @import "../node_modules/bootstrap/scss/modal";
// @import "../node_modules/bootstrap/scss/tooltip";
// @import "../node_modules/bootstrap/scss/popover";
// @import "../node_modules/bootstrap/scss/carousel";
// @import "../node_modules/bootstrap/scss/spinners";
// Helpers
@import "../node_modules/bootstrap/scss/helpers";
// Utilities
@import "../node_modules/bootstrap/scss/utilities/api";

5
assets/css/app.css
View file

@ -1,5 +0,0 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "whitelist/whitelist.css";
@import "conditional/conditional.css";

13
assets/css/app.scss Normal file
View file

@ -0,0 +1,13 @@
// @import "tailwindcss/base";
// @import "tailwindcss/components";
// @import "tailwindcss/utilities";
// @import "whitelist/whitelist.css";
// @import "conditional/conditional.css";
// /* Fonts */
// @import "fonts";
// /* Load Bootstrap v5 and customizations */
// @import "bs-load";
@import "../../node_modules/bootstrap/scss/bootstrap.scss"

10
assets/js/main.js
View file

@ -1,5 +1,11 @@
// Build CSS
import '../css/app.css'
// Import SCSS
import '../css/app.scss'
// Import Bootstrap JS
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/dropdown';
// Import JS Modules
import menu_init from './modules/menu'

2
footer.php
View file

@ -19,7 +19,7 @@ namespace WP_73k;
<div class="lg:flex lg:justify-between">
<div class="lg:w-1/4 text-center lg:text-left">
<div class="text-xl">
<p class="text-sm">WP Tailwind is a utility-first starter theme for WordPress by <a href="https://www.freeshifter.com">Freeshifter LLC</a> and is totally free! <a href="https://www.github.com/freeshifter/wp-73k">Contribute on GitHub</a></a></p>
<p class="text-sm">73k.us is &copy; 2021 by Adam Piontek</p>
</div>
</div>
</div>

2
header.php
View file

@ -44,7 +44,7 @@ namespace WP_73k;
$tag = 'h1';
}
printf( '<%1$s class="text-h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
printf( '<%1$s class="h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
$tag,
esc_url( home_url( '/' ) ),
esc_html( get_bloginfo( 'name' ) )

1
package.json
View file

@ -38,7 +38,6 @@
"cross-env": "^7.0.2",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^3.x",
"cssnano": "^4.1.10",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^1.x",
"postcss": "^8.2.6",

4
postcss.config.js Normal file
View file

@ -0,0 +1,4 @@
module.exports = {
parser: require("postcss-scss"),
plugins: [require("autoprefixer")],
};

38
webpack.config.js
View file

@ -21,7 +21,6 @@ const post_css_plugins = [
// Add PurgeCSS for production builds.
if ( isProduction ) {
post_css_plugins.push(require('cssnano'));
post_css_plugins.push(
PurgeCSS({
content: [
@ -32,9 +31,9 @@ if ( isProduction ) {
'./assets/scss/whitelist/*.css',
'./../../mu-plugins/app/src/components/**/*.php',
],
css: [
'./node_modules/tailwindcss/dist/base.css'
],
// css: [
// './node_modules/tailwindcss/dist/base.css'
// ],
// Use Extractor configuration from Tailwind Docs
// https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually
defaultExtractor: content => {
@ -74,28 +73,11 @@ const config = {
{
test: /\.[s]?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: ! isProduction
}
},
{
loader: 'sass-loader'
},
{
loader: 'postcss-loader',
options: {
sourceMap: isProduction || false,
postcssOptions: {
parser: require("postcss-scss"),
plugins: post_css_plugins,
}
},
}
],
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader",
],
}
]
},
@ -110,9 +92,7 @@ const config = {
}
},
plugins: [
new MiniCssExtractPlugin({
filename: `[name]${prefix}.css`,
}),
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
new CopyWebpackPlugin({
patterns: [{
from: './assets/images/',