Differences

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

--- webpack-lit-scss [2022/03/26 22:29] – admin
+++ webpack-lit-scss [2022/03/26 22: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",
-    "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