Does anyone know how to solve the 404 file not found for a .scss on a component :
this is my .ts file
I would assume this is how you connect your styling
the .scss and the .ts is in the same calendar/ directory
#Component({
selector: 'calendar',
styleUrls: **['calendar.component.scss']**,
templateUrl: 'calendar.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
Has anyone else stumbled upon this issue.
I have tried :
styleUrls: ['calendar.component.scss'],
styleUrls: ['./calendar.component.scss'],
also :
in the app.scss, like so :
#import '../components/calendar/calendar'
#import '../components/calendar/calendar/calender.component.scss'
all attempts are unsuccessful. Any thoughts?
Ionic 4:
Seems the actual styleUrls is a little bugged for relative paths.
Change styleUrls with styles for example:
styles: ['favourites.scss'],
Related
I have an import import icon from 'src/assets/icon.png', which I can't resolve.
I have "baseUrl": "." in jsconfig.json and
"settings": {
"import/resolver": {
"node": {
"paths": ["."]
}
}
}
in .eslintrc, but the thing is that if I use absolute import this way I get an error from Vite - [plugin:vite:import-analysis] Failed to resolve import "src/assets/icon.png" from "src\lib\Logo.svelte". Does the file exist?
At the same time if I add a forward slash before src in import like so import icon from '/src/assets/icon.png', it will work fine with NO error from vite, but eslint/no-unresolved-imports rule will give me a linting error.
I checked vite docs, but the only thing they offer is to use an alias for the path, which I'm not willing to do. Another workaround could be disabling the eslint rule, which is not an option for me either.
Question: Is there a way to resolve this path 'src/assets/icon.png' using "import/resolver" or vite's settings?
I found this page helpful in getting my setup working for absolute/aliased imports with Vite + React, but maybe it will be helpful to you too.
https://dev.to/abdeldjalilhachimi/how-to-avoid-long-path-import-using-react-with-ts-and-vite-4e2h
You don't have to define an alias for every folder - instead you use a dynamics alias that reads the directory name.
Add this to your vite.config.ts to set up the dynamic alias:
import * as path from 'path';
//...
export default defineConfig({
// ...config
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
},
},
});
Then in your tsconfig.json you can define the alias like so:
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
},
The baseUrl by itself almost worked well enough, but this solution seems to be more robust and lets me do exactly the kind of asset and module imports that you're talking about.
import logoPNG from '~/assets/logo.png';
In MODX Revo, TinyMCErte I try to configure the PlugIn via the key tinymcerte.external_config. The config-File has to be valid JSON.
Here is my block, it is ignored.
I want TinyMCE not to convert special characters like german umlaute (öäü) and of cource & should stay & and not &
tinymce.init({
forced_root_block : false,
entity_encoding : "raw"
})
TinyMCE Rich Text Editor (Ver. 1.1.1) is reading the external config file.
the path could be e.g. ../assets/components/tinymcerte/ext-config.json, but it would be advisible to store it in a non web accesible place.
Although this github-entry implies that it reads external config files vom core-path, assets-path and base-path I was not able to get it to work.
the content of the external config file has to be valid JSON:
{
"forced_root_block" : false,
"entity_encoding" : "raw"
}
The keys must be wrapped in "", in contrast to "native" TinyMCE settings (but not sure on this one...)
I did not managed to get the external config file working. I tried an absolute link and a relative. The file did not load anyway.
I edited the file tinymcerte.js in
assets\components\tinymcerte\js\mgr
after this in line 60
tinymce.init(this.cfg);
I put in my configuration before closing the }:
tinymce.init({
selector: "#ta",
schema: 'html5',
element_format : 'xhtml',
forced_root_block : false,
entity_encoding : 'raw'
})
Nevertheless the next update of the extra will destroy this fiddle.
The configuration is connected from the side of php. Therefore, the absolute and relative paths do not work.
Use this kinds of location:
"{base_path}/file.cfg"
"{core_path}/file.cfg"
"{assets_path}/file.cfg"
I am having trouble getting systemjs to work so it resolves node modules.
I have the following in my index.html:
<script src="./system.config.js"></script>
<script>
System.import('blast/test')
.then(null, console.error.bind(console));
</script>
This is my configuration:
System.config({
baseUrl: '/',
packages: {
'app': {
defaultExtension: 'js',
}
},
packageConfigPaths: ['./node_modules/*/package.json'],
paths: {
'blast/*': 'app/*'
}
});
This works fine so far. However, I want to be able to also resolve node modules like lodash. So I set paths to this:
paths: {
'blast/*': 'app/*'
'*': './node_modules/*'
}
Now I can import lodash fine, but when importing blast/test I get the error /app/test 404 (not found). It seems, the package configuration isn't used anymore, this .js isn't appended. Anyone got any hints how to resolve this? I am using SystemJs 0.19.25 Standard.
Thanks, Robin
Try using map configuration here rather for your local package -
System.config({
map: {
blast: './app'
}
});
The ./ is necessary to distinguish the URL space from becoming the node_modules/app path (probably the reason you used paths here to begin with?)
It's also advisable to use baseURL: 'node_modules' instead of a wildcard paths entry (and they pretty much amount to the same thing).
Been experimenting with jspm and systemjs over the weekend. Everything is working fine except for the bundling jspm offers. I can load individual files, but jsmp refuses to load the bundle file (which is optimized).
I'm creating the bundle file using:
jspm bundle lib/login assets/js/1-login.js --inject
This updates the config.js file which looks like:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
"1-login.js": [
"lib/login.js",
"lib/sample.js"
]
},
map: {....}
});
lib/login.js
import * as sample from 'lib/sample'
export function test() {
sample.testMethod();
}
lib/sample.js
import $ from 'jquery'
export function testMethod( ) {
console.log( $('body') );
}
So, according to the jsmp docs:
As soon as one of these modules is requested, the request is intercepted and the bundle is loaded dynamically first, before continuing with the module load.
It's my understanding that running
System.import('lib/login.js');
should load the bundle (and optimised file), but is doesn't - it just loads the actual file. What am I missing here? And as a bonus question, why is jquery not in the bundle list?
Well, figured out where I went wrong.
I keep all the generated assets in assets/js, but in my config.json I didn't change the baseUrl to reflect this. I did in fact have the baseUrl set correctly in package.json, which is why jspm didn't throw a lot of errors.
This was the same reason jquery wasn't loading, so problem solved :)
In my ember-cli app i have installed an addon called 'ember-cli-selectize'. Looking at the directory structure i can see that its files are located at /node_modules/ember-cli-selectize'. Now i want to create a custom component that extends this addon. How do i import/require it? I've tried these and none seems to work:
var EmberSelectize = require('/ember-cli-selectize/app/components/ember-selectize');
import EmberSelectize from 'components/ember-selectize';
import EmberSelectize from 'node_modules/ember-cli-selectize/addon/components/ember-selectize';
import EmberSelectize from 'ember-cli-selectize/addon/components/ember-selectize';
i always get this 'Could not find module' error no matter what. I need to somehow import/require it to do something like
import EmberSelectize from 'wherever/it/is';
export default EmberSelectize.extend({
//my own customizations
})
You were close with:
import EmberSelectize from 'components/ember-selectize';
Addons namespace themselves - in this case, ember-cli-selectize. So, just add the namespace to your import:
import EmberSelectizeComponent from 'ember-cli-selectize/components/ember-selectize';
then you can extend:
export default EmberSelectizeComponent.extend({ });