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 revisionPrevious revision
Next revision
Previous revision
webpack-lit-scss [2022/03/26 21:59] adminwebpack-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> 
  
webpack-lit-scss.1648328347.txt.gz · Last modified: 2022/03/26 21:59 by admin