This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
webpack-lit-scss [2022/03/26 21:27] – created admin | webpack-lit-scss [2022/03/26 21:57] – 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: [' | ||
+ | }, | ||
+ | } | ||
+ | }; | ||
+ | </ | ||