A have written a nativescript plugin using the official plugin seed from github
It's a very simple plugin and has only 2 source files:
index.ts
index.d.ts
(and a native library)
In index.ts, I re-export some native classes like this:
export const BlufiClient = com.esp32.blufi.BlufiClient;
export const BlufiCallback = com.esp32.blufi.BlufiCallback;
and I have my typings for said classes in index.d.ts:
declare module '#freevse/nativescript-blufi'{
export class BlufiClient{
ctor, functions, etc...
}
export abstract class BlufiCallback {
ctor, functions, etc...
}
}
My issue is that when using the pack.sh script in the 'publish' folder, both of the class typings above become (the resulting index.d.ts file contains):
export declare const BlufiClient: any;
export declare const BlufiCallback: any;
All the typings I wrote are squashed by any...
The repo is available here
Any idea what's going on?
So it turned out
"compilerOptions": {
"declaration": true,
}
was the issue. tsc was overwriting my handwritten typings with generated ones.
Related
I have a brand new project using SvelteKit. By default, vitePreprocess is used to handle scss and other files, as described in the docs:
vite-plugin-svelte offers a vitePreprocess feature which utilizes Vite
for preprocessing. It is capable of handling the language flavors Vite
handles: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. For
convenience, it is re-exported from the #sveltejs/kit/vite package. If
you set your project up with TypeScript it will be included by
default:
// svelte.config.js
import { vitePreprocess } from '#sveltejs/kit/vite';
export default {
preprocess: [vitePreprocess()]
};
However, if I use lang="scss" in my files:
<style lang="scss">
....
</style>
I get the following error:
Error: Error while preprocessing /Users/francesco.leardini/Documents/pet projects/budget-tracker/src/routes/+page.svelte - Preprocessor dependency "sass" not found. Did you install it?
at loadPreprocessor (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36922:19)
at scss (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36962:20)
at compileCSS (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36482:40)
at async preprocessCSS (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36644:12)
at async style (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/#sveltejs/vite-plugin-svelte/dist/index.js:2055:20)
at async process_single_tag (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46844:27)
at async Promise.all (index 0)
at async replace_in_code (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46732:26)
at async process_tag (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46858:29)
at async preprocess (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46898:30)
Shouldn't scss files be handled out of the box as stated in the docs?
Add the dependency sass to your project first?
npm add -D sass or with whatever package manager you use.
I know the question is broad but at this point I'm not necessarily sure how to specify it. I am currently working on a Laravel/Vue project, and I want to create an extracted module that will eventually be an NPM package. The reason I want to extract it is because I will use this chunk of code as a mixin within various Vue components.
I want to do this all locally so that I don't have to continuously mess with NPM, so I set up the link between my project and my module via the npm link command. I can confirm in my Project that there is a symbolic link directory in the node_modules directory, pointing to my Module.
In my Project, I have the code from the mixin executing a function inside another method of my Vue component, like so:
this.updateState(response.state);
I am importing and defining the mixin in that file like so:
import UpdatesState from 'module';
export default {
mixins: [UpdatesState],
This updateState method is defined in my Module. Inside my Module, here is what my module/src/mixins/UpdateState file looks like:
export default {
methods: {
updateState(state) {
this.$store.commit('state', state);
}
},
}
Also in the Module, I have an index.js file that looks like this:
import UpdatesState from './mixins/UpdatesState'
export default {
UpdatesState
}
My Module's package.json looks like this:
{
"name": "module",
"description": "Supporting modules",
"main": "src/index.js",
"author": "Hoolakoola",
"license": "MIT"
}
When I was running this code from within the actual source of the Project and just referencing it by its absolute path, it was working fine. But now that I am trying to extract it, it is not working properly. I am not getting any errors when compiling the Project, and there are no errors in the console. Any idea what is going wrong here and how I can fix it? Thank you.
I have the following project structure:
gatsby-config.js
/src
/components
layout.jsx
/button
button.jsx
button.scss
/pages
/styles
styles.scss
_mixins.scss
_variables.scss
and gatsby-config.js and styles.scss are configured respectively in the following way:
...
plugins: [
...,
`gatsby-plugin-sass`
]
...
#import 'variables',
'mixins';
in order to access the mixins and variables, the styles.scss is being currently imported in all the components' scss files, e.g.:
//button.scss
#import './../styles/styles.scss'
This approach is working, but the problem is, as the project grows, the styles.scss is being imported multiple times and seems to be something wrong with this approach.
Is it possible to import styles.scss only once, and make all mixins and variables available across all the components?
You are able to pass options to Sass via gatsby-plugin-sass.
The following options would globally expose the contents of ./src/styles/_styles.scss to each Sass file in the project, without the need to explicitly import it.
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-sass',
options: {
data: `#import "${__dirname}/src/styles/styles";`,
}
},
],
}
Note: The below might be obvious to some but it's worth mentioning for future readers.
Only do this with Sass files that contain just variables, mixins, functions, etc (Sass features that do not output any actual CSS until they are consumed). Otherwise you will end up with CSS that is repeated multiple times across your project.
Example repo
Providing SCSS variables globally to your components
With #use
SCSS syntax
gatsby-plugin-sass
Component-Scoped Styles with CSS Modules
gatsby-plugin-sass config
gatsby-config.js file:
{
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass"),
data: `#use "${__dirname}/src/global-styles/variables" as var;`
}
},
var will be used as namespace.
Providing variables to your scss files
./src/global-styles/_variables.scss
./src/components/main.jsx
./src/components/main.module.scss
Info about the underscore in _variables.scss, partials.
_variables.scss file:
$color-1: red;
$color-2: blue;
main.jsx file:
import React from 'react'
import style from './main.module.scss'
const Main = () => (
<div className={style.main}>Content</div>
)
export default Main
main.module.scss file:
.main {
color: var.$color-1;
}
But I need expose some global styles in gatsby-browser.js
Well, your are going to need #use, or follow other answers that use #import in gatsby-config.js. Mixing #import and #use may not work because of:
Heads up!
A stylesheet’s #use rules must come before any rules other than #forward, including style rules. However, you can declare variables before #use rules to use when configuring modules.
https://sass-lang.com/documentation/at-rules/use
I stopped using #import, only using #use.
global-styles.scss file:
#use "./variables" as var;
body {
color: var.$color-2;
}
gatsby-browser.js file:
import './src/global-styles/global-styles.scss'
Create a file named gatsby-browser.js in the root of your directory. Import the .scss file once and it will work perfectly .
In your gatsby-browser.js
import "./src/styles/styles.scss"
As Ankit Sinha mentioned, you can import your styles in gatsby-browser.js:
import './src/styles/styles.scss';
This method is mentioned in the Gatsby tutorial.
According to the docs (see Standard Styling with Global CSS Files):
The best way to add global styles is with a shared layout component.
Your project structure suggests that you are using one (layout.jsx). If that's the case, you can also import your styles in layout.jsx:
import './../styles/styles.scss';
I cant write comments yet. I dont have the reputation. But what a complete answer from Undefined Behavior.
Just to order a little bit:
Import your global-styles.scss in gatsby-browser.js
Configure something that's going to be exposed to all scss files, in your gatsby-config.js.
It can be an #import or an #use. With #import you access directly to your variables and mixins and with #use you reference it. I don't really know what are the benfits of both, but you could use any.
I'm trying to use the Sass parts of Material design official library inside my Nuxt project.
I have created a file inside assets folder called styles.scss and tried to import a simple component like this :
#import "~#material/textfield/icon/mdc-text-field-icon";
However it's displaying me this error :
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#import "#material/theme/variables";
^
File to import not found or unreadable: #material/theme/variables.
Obviously it's because there is no ~ inside the import name so Nuxt doesn't know where to find it...
Does anyone know how i can solve this ? With node-sass, i used the --include-path to solve this issue but i didn't found anything similar in nuxt...
Thanks in advance !
I found the way to solve my problem by adding the following code to nuxt.config.js :
build: {
extend(config, context) {
config.module.rules.push({
test: /\.(sass|scss)$/,
use: {
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}
})
}
}
I don't know if it's the best solution but i don't need any ~ inside my scss, it automatically search inside the node_modules, which is nice.
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?