github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-30 21:42:51 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve LESS loading in Storybook (#5406)

Browse source 
GitOrigin-RevId: ad128b8be645ed54de498b543f655751a6a0799b
This commit is contained in:
Alf Eaton 2021-10-12 09:49:07 +01:00 committed by Copybot
parent 9c0b6f0fa7
commit 4274782443
2 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
services/web/.storybook/main.js
View file

@ -1,4 +1,5 @@
const path = require('path') const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// NOTE: must be set before webpack config is imported // NOTE: must be set before webpack config is imported
process.env.SHARELATEX_CONFIG = path.resolve( process.env.SHARELATEX_CONFIG = path.resolve(
@ -22,8 +23,7 @@ module.exports = {
...storybookConfig.module.rules.filter( ...storybookConfig.module.rules.filter(
rule => !rule.test.toString().includes('woff') rule => !rule.test.toString().includes('woff')
), ),
// Replace the less rule, adding to-string-loader // Replace the LESS rule, and the CSS rule which conflicts with the built-in CSS loader
// Filter out the MiniCSS extraction, which conflicts with the built-in CSS loader
...customConfig.module.rules.filter( ...customConfig.module.rules.filter(
rule => rule =>
!rule.test.toString().includes('less') && !rule.test.toString().includes('less') &&
@ -31,7 +31,7 @@ module.exports = {
), ),
{ {
test: /\.less$/, test: /\.less$/,
use: ['to-string-loader', 'css-loader', 'less-loader'], use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
}, },
] ]

4
services/web/.storybook/preview.js
View file

@ -65,7 +65,9 @@ export const loaders = [
// NOTE: this uses `${theme}style.less` rather than `${theme}.less` // NOTE: this uses `${theme}style.less` rather than `${theme}.less`
// so that webpack only bundles files ending with "style.less" // so that webpack only bundles files ending with "style.less"
activeStyle: await import( activeStyle: await import(
`../frontend/stylesheets/${theme === 'default-' ? '' : theme}style.less` `!!to-string-loader!css-loader!less-loader!../frontend/stylesheets/${
theme === 'default-' ? '' : theme
}style.less`
), ),
} }
}, },