Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
webpack-lit-scss [2022/03/26 20:30] – admin | webpack-lit-scss [2022/03/26 21:29] – admin |
---|
====== Lit using Scss ====== | ====== Lit using Scss ====== |
| |
<code json package.json> | <code javascript package.json> |
{ | { |
"name": "vereine", | "name": "club", |
"version": "1.0.0", | "version": "1.0.0", |
"main": "index.js", | "main": "index.js", |
"watch": "./node_modules/.bin/webpack --watch --progress --mode development", | "watch": "./node_modules/.bin/webpack --watch --progress --mode development", |
"build:development": "./node_modules/.bin/webpack -c webpack.config.js --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", | "build:production": "./node_modules/.bin/webpack -c webpack.config.js --progress --mode production" |
"test:server": "TYPO3_CONTEXT=Development/Test php -S 127.0.0.1:8000 -t public/", | |
"test:db:import": "touch var/typo3-testing.sqlite && rm var/typo3-testing.sqlite && sqlite3 var/typo3-testing.sqlite < tests/_data/typo3-testing.sql", | |
"test:db:export": "sqlite3 var/typo3-testing.sqlite .dump > tests/_data/typo3-testing.sql", | |
"runner:assets": "gitlab-runner exec docker \"build assets\" --docker-volumes `pwd`:/builds/project-0 --env GIT_STRATEGY=\"none\"", | |
"runner:tests": "gitlab-runner exec docker \"codeception\" --docker-volumes `pwd`:/builds/project-0 --env GIT_STRATEGY=\"none\"" | |
}, | }, |
"dependencies": { | "dependencies": { |
"@fortawesome/fontawesome-free": "^6.1.0", | |
"autoprefixer": "^10.4.4", | "autoprefixer": "^10.4.4", |
"bootstrap": "5.1.3", | |
"copy-webpack-plugin": "^10.2.4", | |
"css-loader": "^6.7.1", | "css-loader": "^6.7.1", |
"cssnano": "^5.1.4", | "cssnano": "^5.1.4", |
"eslint-plugin-prettier": "^4.0.0", | |
"extract-loader": "^5.1.0", | "extract-loader": "^5.1.0", |
"file-loader": "^6.2.0", | "file-loader": "^6.2.0", |
"lit": "^2.2.1", | "lit": "^2.2.1", |
"lit-scss-loader": "^1.1.0", | "lit-scss-loader": "^1.1.0", |
"nprogress": "^0.2.0", | |
"o9n": "^2.1.1", | |
"postcss-loader": "^6.2.1", | "postcss-loader": "^6.2.1", |
"prettier": "^2.6.0", | |
"prettier-webpack-plugin": "^1.2.0", | |
"sass": "^1.49.9", | "sass": "^1.49.9", |
"sass-loader": "^12.6.0", | "sass-loader": "^12.6.0", |
"seamless-scroll-polyfill": "^2.1.8", | |
"smoothscroll-polyfill": "^0.4.4", | |
"tiny-slider": "^2.9.4", | |
"ts-loader": "^9.2.8", | "ts-loader": "^9.2.8", |
"typescript": "^4.6.2", | "typescript": "^4.6.2", |
</code> | </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> |