This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
webpack-lit-scss [2022/03/26 20:57] – admin | webpack-lit-scss [2022/03/26 21:49] (current) – removed admin | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Lit using Scss ====== | ||
- | |||
- | <code javascript package.json> | ||
- | { | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | }, | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | }, | ||
- | " | ||
- | " | ||
- | }, | ||
- | " | ||
- | } | ||
- | |||
- | </ | ||
- | |||
- | <code javascript webpack.config.js> | ||
- | const path = require(' | ||
- | const PrettierPlugin = require(' | ||
- | |||
- | module.exports = (env, argv) => { | ||
- | return { | ||
- | mode: ' | ||
- | entry: { | ||
- | ' | ||
- | }, | ||
- | output: { | ||
- | path: path.resolve(__dirname, | ||
- | filename: ' | ||
- | publicPath: '/ | ||
- | }, | ||
- | watchOptions: | ||
- | ignored: [' | ||
- | }, | ||
- | plugins: [ | ||
- | new PrettierPlugin({ | ||
- | printWidth: 80, | ||
- | tabWidth: 2, | ||
- | useTabs: false, | ||
- | semi: true, | ||
- | encoding: ' | ||
- | extensions: [ " | ||
- | }) | ||
- | ], | ||
- | module: { | ||
- | rules: [ | ||
- | { | ||
- | test: /\.tsx?$/, | ||
- | use: ' | ||
- | exclude: / | ||
- | }, | ||
- | // Process files in TypeScript/ | ||
- | // to be used in each web component | ||
- | { | ||
- | test: / | ||
- | use: [{ | ||
- | loader: ' | ||
- | options: { | ||
- | minify: true, // defaults to false | ||
- | }, | ||
- | }, ' | ||
- | }, | ||
- | // Process files in Assets/ | ||
- | { | ||
- | test: / | ||
- | use: [ | ||
- | { | ||
- | loader: ' | ||
- | options: { | ||
- | name: ' | ||
- | outputPath: ' | ||
- | } | ||
- | }, | ||
- | { loader: ' | ||
- | { loader: ' | ||
- | { loader: ' | ||
- | { | ||
- | loader: ' | ||
- | options: { | ||
- | additionalData: | ||
- | } | ||
- | }, | ||
- | ] | ||
- | }, | ||
- | ], | ||
- | }, | ||
- | resolve: { | ||
- | extensions: [' | ||
- | }, | ||
- | } | ||
- | }; | ||
- | </ | ||