diff --git a/.config/webpack/webpack.common.js b/.config/webpack/webpack.common.js index 43538b74..6bf6da9d 100644 --- a/.config/webpack/webpack.common.js +++ b/.config/webpack/webpack.common.js @@ -1,6 +1,7 @@ const path = require('path') const webpack = require('webpack') const { CleanWebpackPlugin } = require('clean-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { VueLoaderPlugin } = require('vue-loader') module.exports = { @@ -34,7 +35,37 @@ module.exports = { } } ] - } + }, + ... (() => { + const rules = [] + + const loaders = [ + { test: /\.(css|postcss)$/i }, + { test: /\.s[ac]ss$/i, loader: 'sass-loader' }, + { test: /\.less$/i, loader: 'less-loader' }, + { test: /\.styl$/i, loader: 'stylus-loader' } + ] + + loaders.forEach((element, index) => { + rules.push({ + test: element.test, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'postcss-loader', + options: { + postcssOptions: require(path.resolve(__dirname, '../postcss.config.js')) + } + } + ] + }) + + if (element.loader) rules[index].use.push(element.loader) + }) + + return rules + })() ] }, plugins: [ @@ -45,6 +76,13 @@ module.exports = { new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*', '!*static*'] }), + /** + * docs: https://webpack.js.org/plugins/mini-css-extract-plugin + */ + new MiniCssExtractPlugin({ + filename: './bundle.css', + chunkFilename: '[id].css' + }), new VueLoaderPlugin(), new webpack.DefinePlugin({ __VUE_OPTIONS_API__: 'true', diff --git a/.config/webpack/webpack.dev.js b/.config/webpack/webpack.dev.js index f747eea2..fa933854 100644 --- a/.config/webpack/webpack.dev.js +++ b/.config/webpack/webpack.dev.js @@ -6,40 +6,6 @@ const common = require('./webpack.common.js') module.exports = merge(common, { mode: 'development', - module: { - rules: [ - ... (() => { - const rules = [] - - const loaders = [ - { test: /\.(css|postcss)$/i }, - { test: /\.s[ac]ss$/i, loader: 'sass-loader' }, - { test: /\.less$/i, loader: 'less-loader' }, - { test: /\.styl$/i, loader: 'stylus-loader' } - ] - - loaders.forEach((element, index) => { - rules.push({ - test: element.test, - use: [ - 'style-loader', - 'css-loader', - { - loader: 'postcss-loader', - options: { - postcssOptions: require(path.resolve(__dirname, '../postcss.config.js')) - } - } - ] - }) - - if (element.loader) rules[index].use.push(element.loader) - }) - - return rules - })() - ] - }, plugins: [ /** * docs: https://www.npmjs.com/package/eslint-webpack-plugin diff --git a/.config/webpack/webpack.prod.js b/.config/webpack/webpack.prod.js index ac1219ba..6635155d 100644 --- a/.config/webpack/webpack.prod.js +++ b/.config/webpack/webpack.prod.js @@ -1,6 +1,4 @@ -const path = require('path') const { merge } = require('webpack-merge') -const MiniCssExtractPlugin = require('mini-css-extract-plugin') const TerserPlugin = require('terser-webpack-plugin') // included in webpack 5, no need to add to package.json const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') const common = require('./webpack.common.js') @@ -20,48 +18,9 @@ module.exports = merge(common, { presets: [ '@babel/preset-env' ], plugins: [ '@babel/plugin-transform-runtime' ] } - }, - ... (() => { - const rules = [] - - const loaders = [ - { test: /\.(css|postcss)$/i }, - { test: /\.s[ac]ss$/i, loader: 'sass-loader' }, - { test: /\.less$/i, loader: 'less-loader' }, - { test: /\.styl$/i, loader: 'stylus-loader' } - ] - - loaders.forEach((element, index) => { - rules.push({ - test: element.test, - use: [ - MiniCssExtractPlugin.loader, - 'css-loader', - { - loader: 'postcss-loader', - options: { - postcssOptions: require(path.resolve(__dirname, '../postcss.config.js')) - } - } - ] - }) - - if (element.loader) rules[index].use.push(element.loader) - }) - - return rules - })() + } ] }, - plugins: [ - /** - * docs: https://webpack.js.org/plugins/mini-css-extract-plugin - */ - new MiniCssExtractPlugin({ - filename: './bundle.css', - chunkFilename: '[id].css' - }) - ], optimization: { minimize: true, minimizer: [ diff --git a/package.json b/package.json index db0d3891..f814dfbd 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "shopify-theme-lab", "description": "Customizable modular development environment for blazing-fast Shopify theme creation", "author": "Sergej Samsonenko", - "version": "4.0.4", + "version": "4.1.0", "license": "MIT", "scripts": { "start": "run-p -sr shopify:serve webpack:watch", @@ -22,37 +22,36 @@ "fix:shopify": "cd shopify && shopify theme check -a" }, "dependencies": { - "tailwindcss": "^2.2.4", + "tailwindcss": "^2.2.7", "vue": "^3.1.5", "vuex": "^4.0.2" }, "devDependencies": { - "@babel/core": "^7.14.6", + "@babel/core": "^7.14.8", "@babel/plugin-transform-runtime": "^7.14.5", - "@babel/preset-env": "^7.14.7", + "@babel/preset-env": "^7.14.8", "@vue/compiler-sfc": "^3.1.5", "autoprefixer": "^10.3.1", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^3.0.0", "cross-env": "^7.0.3", - "css-loader": "^6.0.0", + "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.0.2", - "eslint": "^7.30.0", - "eslint-plugin-vue": "^7.13.0", - "eslint-webpack-plugin": "^2.5.4", + "eslint": "^7.31.0", + "eslint-plugin-vue": "^7.14.0", + "eslint-webpack-plugin": "^3.0.1", "mini-css-extract-plugin": "^2.1.0", "npm-run-all": "^4.1.5", - "postcss": "^8.3.5", + "postcss": "^8.3.6", "postcss-import": "^14.0.2", "postcss-loader": "^6.1.1", "postcss-preset-env": "^6.7.0", - "style-loader": "^3.1.0", "stylelint": "^13.13.1", "stylelint-config-recommended": "^5.0.0", - "stylelint-webpack-plugin": "^2.2.2", + "stylelint-webpack-plugin": "^3.0.1", "url-loader": "^4.1.1", "vue-loader": "^16.3.1", - "webpack": "^5.45.1", + "webpack": "^5.46.0", "webpack-cli": "^4.7.2", "webpack-merge": "^5.8.0" } diff --git a/shopify/layout/theme.liquid b/shopify/layout/theme.liquid index 9e4821a7..f0db937d 100644 --- a/shopify/layout/theme.liquid +++ b/shopify/layout/theme.liquid @@ -15,9 +15,6 @@ {% endif %} - {% comment %} - css bundle is not loaded during the development task, instead it displays a 404 error in the web console - {% endcomment %} {{ 'bundle.css' | asset_url | stylesheet_tag }}