User Tools

Site Tools


webpack-lit-scss

This is an old revision of the document!


Lit using Scss

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"
}
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'],
    },
  }
};
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": []
}
webpack-lit-scss.1648330177.txt.gz ยท Last modified: 2022/03/26 22:29 by admin