User Tools

Site Tools


webpack-lit-scss

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
webpack-lit-scss [2022/03/26 22:49]
admin removed
— (current)
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>