Add sass-resources-loader type functionality for loading SASS files #297
Comments
|
Thank you @mikeb-meq. We will look into that. |
|
@mikeb-meq To support this case, we can replace We appreciate your contribution to the project. Here are the steps you can get started with:
Thanks. |
|
Thanks for building this great looking project and for the quick response! I will update here when I can dedicate some time to this, hopefully in the next few weeks. |
|
Hi @ntt261298 - I was able to revisit this this week and have a working implementation for the feature. I needed to branch off the 0.3.1 tag however since the 0.3.2 alpha release was giving me errors trying to run the server: Do you have any suggestions on how to resolve that? I can still create a PR with my commits cherry picked on a branch from 0.3.2 alpha, but I have not been able to test the code in that state. |
|
Hi @mikeb-meq
import { program } from 'commander';
import chalk from 'chalk';
program
.command('config-cra')
.description('Integrate Jest Preview with CRA.')
.action(() => {
import('./configCra');
});
program
.command('clear-cache')
.description('Clear Jest and Jest Preview cache.')
.action(() => {
import('./clearCache');
});
program.description('Start Jest Preview server.').action(() => {
import('./server/previewServer');
});
program.parse(process.argv);
import('update-notifier').then(({ default: updateNotifier }) => {
// Checks for available update and notify user
const notifier = updateNotifier({
// Built output is at /cli so the relative path is ../package.json
pkg: require('../../package.json'),
updateCheckInterval: 0, // How often to check for updates
shouldNotifyInNpmScript: true, // Allows notification to be shown when running as an npm script
distTag: 'latest', // Can be use to notify user about pre-relase version
});
notifier.notify({
defer: true, // Try not to annoy user by showing the notification after the process has exited
message: [
`${chalk.blue('{packageName}')} has an update available: ${chalk.gray(
'{currentVersion}',
)} → ${chalk.green('{latestVersion}')}`,
`Please run ${chalk.cyan('`{updateCommand}`')} to update.`,
].join('\n'),
});
// END checks for available update and notify user
});Thanks for revisiting |
|
Hi @ntt261298 - thank you for your quick reply - applying that patch locally allowed me to run everything from the latest alpha branch. As far as testing my feature, I was able to confirm it is working with the "demo" app within jest-preview itself (using
to test it from my own project, I encounter this error when using Do you have any suggestions for resolving this? Is there any other testing I should perform before opening a PR back to your repo for the feature? |
|
Hi @mikeb-meq Looks like I can still link After checking that the new update works on your project, you can open a PR to Thanks. |
|
Hi @ntt261298 - thanks for the reply. I'm not sure what was causing the above error for me, but my project has a dependency on The results of and it loads the demo app page with my new text entry: I have opened a PR for the feature. Should I also update the documentation for jestPreviewConfigure? |
|
Hi @mikeb-meq Thanks for your PR. Let's help to update the documentation for jestPreviewConfigure. |
|
@ntt261298 Okay, I pushed a commit to update that documentation. |
|
@mikeb-meq I've added some comments to the PR, please help to take a look. Thank you again. |
Is your feature request related to a problem? Please describe.
I have set up jest-preview in my project and it seems to work well other than loading my styles (with SASS). When I add the following config to my
jest.config.js, my test starts encountering "Undefined variable."This is happening because I use global SASS variables defined in separate files, and load those using sass-resources-loader with webpack for when the application runs. I found the existing option for globally loading css, but that seems to load the files individually rather than prepending them to all imported scss like sass-resources-loader does.
Describe the solution you'd like
Ideally adding a config option for prepending a set of scss files to all imported scss, like sass-resources-loader supports.
Describe how should jest-preview implements this feature
This could be potentially implemented by reading the contents of the global files and concatenating them with each imported scss using sass.compileString rather than
sass.compile, but I don't know how efficient that would be.Describe alternatives you've considered
I couldn't think of any alternatives that wouldn't require changing application code as a workaround.
I would be happy to try contributing this feature if I could be pointed to the best place to start.
The text was updated successfully, but these errors were encountered: