Differences

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

--- webpack-lit-scss [2022/03/26 21:27] – created admin
+++ webpack-lit-scss [2022/03/26 22:29] – admin
@@ Line 1: / Line 1: @@
-====== Webpack, Yarn, Lit and SCSS ======
+====== 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",
+    "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",
+    "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')
+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: [],
+    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>
+<code javascript tsconfig,json>
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "es2020",
+    "lib": ["es2020", "DOM", "DOM.Iterable"],
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": false,
+    "inlineSources": false,
+    // Disable for now, seems to copy *.ts files to
+    // places where they do not belong
+    //"outDir": "./packages/tgo_core/Resources/Public/JavaScript",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
+  },
+  "include": [
+    "./TypeScript/**/*.ts",
+    "node_modules/lit-scss-loader/types.d.ts"
+  ],
+  "exclude": []
+}
+</code>

Differences

Page Tools