From 07d62bd309010e7785c6a417585630e50daa7db6 Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Fri, 26 Aug 2022 12:26:33 +0300 Subject: [PATCH] sass working --- grafana-plugin/package.json | 2 +- .../src/components/Text/Text.module.scss | 4 +- grafana-plugin/webpack.config.js | 40 ++++++++++++++----- grafana-plugin/yarn.lock | 32 +++++---------- 4 files changed, 42 insertions(+), 36 deletions(-) diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index f4fc59c8..4921d53e 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -65,11 +65,11 @@ "copy-webpack-plugin": "^11.0.0", "dompurify": "^2.3.12", "eslint-plugin-rulesdir": "^0.2.1", - "less-loader": "5.0.0", "lint-staged": "^10.2.11", "lodash-es": "^4.17.21", "moment-timezone": "^0.5.35", "plop": "^2.7.4", + "postcss-loader": "^7.0.1", "ts-loader": "^9.3.1", "webpack-bundle-analyzer": "^4.6.1" }, diff --git a/grafana-plugin/src/components/Text/Text.module.scss b/grafana-plugin/src/components/Text/Text.module.scss index d31cb451..d35e483c 100644 --- a/grafana-plugin/src/components/Text/Text.module.scss +++ b/grafana-plugin/src/components/Text/Text.module.scss @@ -22,15 +22,13 @@ &--success { color: var(--green-5); } - &--strong { font-weight: bold; } &--underline { text-decoration: underline; } - - &--smal { + &--small { font-size: 12px; } &--large { diff --git a/grafana-plugin/webpack.config.js b/grafana-plugin/webpack.config.js index 8369d526..d7c05774 100644 --- a/grafana-plugin/webpack.config.js +++ b/grafana-plugin/webpack.config.js @@ -14,12 +14,14 @@ module.exports.getWebpackConfig = (config, options) => { cssLoader.exclude.push(/\.module\.css$/, MONACO_DIR); + const grafanaRules = config.module.rules.filter((a) => a.test.toString() !== /\.s[ac]ss$/.toString()); + const newConfig = { ...config, module: { ...config.module, rules: [ - ...config.module.rules, + ...grafanaRules, { test: /\.(ts|tsx)$/, @@ -79,7 +81,7 @@ module.exports.getWebpackConfig = (config, options) => { }, { - test: /\.module\.(css|less)$/, + test: /\.module\.css$/, exclude: /node_modules/, use: [ 'style-loader', @@ -95,6 +97,26 @@ module.exports.getWebpackConfig = (config, options) => { }, ], }, + + { + test: /\.module\.scss$/i, + exclude: /node_modules/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + sourceMap: true, + modules: { + localIdentName: options.production ? '[name]__[hash:base64]' : '[path][name]__[local]', + }, + }, + }, + 'postcss-loader', + 'sass-loader', + ], + }, ], }, @@ -111,7 +133,7 @@ module.exports.getWebpackConfig = (config, options) => { allowAsyncCycles: false, // set the current working directory for displaying module paths cwd: process.cwd(), - }), + }) // new BundleAnalyzerPlugin(), ], @@ -122,12 +144,12 @@ module.exports.getWebpackConfig = (config, options) => { }, }; - // fs.writeFile('webpack-conf.json', JSON.stringify(newConfig, null, 2), function (err) { - // if (err) { - // return console.log(err); - // } - // console.log('config > webpack-conf.json'); - // }); + /* fs.writeFile('webpack-conf.json', JSON.stringify(newConfig, null, 2), function (err) { + if (err) { + return console.log(err); + } + console.log('config > webpack-conf.json'); + }); */ return newConfig; }; diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock index 39860837..6dda27d4 100644 --- a/grafana-plugin/yarn.lock +++ b/grafana-plugin/yarn.lock @@ -4322,11 +4322,6 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== -clone@^2.1.1: - version "2.1.2" - resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" - integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== - clsx@^1.1.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" @@ -8014,15 +8009,6 @@ lerc@^3.0.0: resolved "https://registry.yarnpkg.com/lerc/-/lerc-3.0.0.tgz#36f36fbd4ba46f0abf4833799fff2e7d6865f5cb" integrity sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww== -less-loader@5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz" - integrity sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg== - dependencies: - clone "^2.1.1" - loader-utils "^1.1.0" - pify "^4.0.1" - less-loader@^10.2.0: version "10.2.0" resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-10.2.0.tgz#97286d8797dc3dc05b1d16b0ecec5f968bdd4e32" @@ -8131,15 +8117,6 @@ loader-runner@^4.2.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1" integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg== -loader-utils@^1.1.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" - integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== - dependencies: - big.js "^5.2.2" - emojis-list "^3.0.0" - json5 "^1.0.1" - loader-utils@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129" @@ -9589,6 +9566,15 @@ postcss-loader@^6.2.1: klona "^2.0.5" semver "^7.3.5" +postcss-loader@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.0.1.tgz#4c883cc0a1b2bfe2074377b7a74c1cd805684395" + integrity sha512-VRviFEyYlLjctSM93gAZtcJJ/iSkPZ79zWbN/1fSH+NisBByEiVLqpdVDrPLVSi8DX0oJo12kL/GppTBdKVXiQ== + dependencies: + cosmiconfig "^7.0.0" + klona "^2.0.5" + semver "^7.3.7" + postcss-logical@^5.0.4: version "5.0.4" resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-5.0.4.tgz#ec75b1ee54421acc04d5921576b7d8db6b0e6f73"