Differences

This shows you the differences between two versions of the page.

--- webpack-lit-scss [2022/03/26 20:57] – admin
+++ webpack-lit-scss [2022/03/26 21:49] (current) – removed admin
@@ Line 1: / Line 1: @@
-====== Lit using Scss ======
-<code javascript package.json>
-{
-  "name": "club",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "ochorocho",
-  "license": "MIT",
-  "scripts": {
-    "watch": "./node_modules/.bin/webpack --watch --progress --mode development",
-    "build:development": "./node_modules/.bin/webpack -c webpack.config.js --progress --mode development",
-    "build:production": "./node_modules/.bin/webpack  -c webpack.config.js --progress --mode production",
-  },
-  "dependencies": {
-    "autoprefixer": "^10.4.4",
-    "css-loader": "^6.7.1",
-    "cssnano": "^5.1.4",
-    "eslint-plugin-prettier": "^4.0.0",
-    "extract-loader": "^5.1.0",
-    "file-loader": "^6.2.0",
-    "lit": "^2.2.1",
-    "lit-scss-loader": "^1.1.0",
-    "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.0",
-    "prettier-webpack-plugin": "^1.2.0",
-    "sass": "^1.49.9",
-    "sass-loader": "^12.6.0",
-    "ts-loader": "^9.2.8",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
-  },
-  "devDependencies": {
-    "webpack-cli": "^4.9.2"
-  },
-  "packageManager": "yarn@3.2.0"
-}
-</code>
-<code javascript webpack.config.js>
-const path = require('path')
-const PrettierPlugin = require('prettier-webpack-plugin')
-module.exports = (env, argv) => {
-  return {
-    mode: 'production',
-    entry: {
-      'app': './Assets/TypeScript/app.ts',
-    },
-    output: {
-      path: path.resolve(__dirname, 'packages/tgo_core/Resources/Public/'),
-      filename: 'JavaScript/[name].js',
-      publicPath: '/typo3conf/ext/tgo_core/Resources/Public/'
-    },
-    watchOptions: {
-      ignored: ['node_modules']
-    },
-    plugins: [
-      new PrettierPlugin({
-        printWidth: 80,
-        tabWidth: 2,
-        useTabs: false,
-        semi: true,
-        encoding: 'utf-8',
-        extensions: [ ".js", ".scss" ]
-      })
-    ],
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
-        },
-        // Process files in TypeScript/Components/Scss/*
-        // to be used in each web component
-        {
-          test: /Components\/Scss\/(.*)(\.css|\.s(c|a)ss$)/i,
-          use: [{
-            loader: 'lit-scss-loader',
-            options: {
-              minify: true, // defaults to false
-            },
-          }, 'extract-loader', 'css-loader', 'sass-loader'],
-        },
-        // Process files in Assets/Scss/* and bundle as app.css
-        {
-          test: /Assets\/Scss\/(.*)(\.css|\.s(c|a)ss$)/i,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].css',
-                outputPath: './Css/'
-              }
-            },
-            { loader: 'extract-loader' },
-            { loader: 'css-loader' },
-            { loader: 'postcss-loader' },
-            {
-              loader: 'sass-loader',
-              options: {
-                additionalData: "$mode: " + argv.mode + ";",
-              }
-            },
-          ]
-        },
-      ],
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
-    },
-  }
-};
-</code>

Differences

Page Tools