replace tailwind with bootstrap: initial webpack config for development
This commit is contained in:
parent
c2bdb112ea
commit
1388a95038
50
assets/css/_bs-load.scss
Normal file
50
assets/css/_bs-load.scss
Normal 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";
|
||||
|
|
@ -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
13
assets/css/app.scss
Normal 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"
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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 © 2021 by Adam Piontek</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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' ) )
|
||||
|
|
|
|||
|
|
@ -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
4
postcss.config.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
parser: require("postcss-scss"),
|
||||
plugins: [require("autoprefixer")],
|
||||
};
|
||||
|
|
@ -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/',
|
||||
|
|
|
|||
Loading…
Reference in a new issue