I am trying to import multiple scss files into my Vue2 project however I am getting errors on compilation - I suspect this is possible, its just my implementation is wrong...
My 'main.scss' file is imported into 'index.js' using the following line:
import './styles/main.scss'
Then, in my 'main.scss' file I have the following:
#import "./base.scss";// color pallete
#import "./variants.scss"; //variant colors using primary colors from base.scss
'base.scss' looks like the following:
$slim-color-brand-orange: #e87820;
$slim-color-brand-blue: #004a79;
$slim-color-brand-charcoal: #595a59;
'variants.scss' looks like the following:
$slim-color-brand-orange-light: lighten($slim-color-brand-orange, 15%);
$slim-color-brand-blue-light: lighten($slim-color-brand-blue, 15%);
$slim-color-brand-charcoal-light: lighten($slim-color-brand-charcoal, 15%);
However the error that I receive looks like the following:
Undefined variable: "$slim-color-brand-light-blue-l5"
Below is an example of how I use the variables:
background-color: $color-error-background;
Can anybody tell me what I am doing wrong? - Thanks in advance ;)
This should work as long as your background-color: $color-error-background is in your main.scss file, after the import statement.
Base and Variants contains variables. Any scss file that imports them, will be able to access those variables.
I think the issue may be the import into index.js.
Related
I'm hitting some problems extending Quill.
I want to modify the List and ListItem classes in Quill, so I tried to copy formats/list.js into my code base as a starting point. I then import my local copy and register it with Quill like so...
import { List, ListItem } from './quill/list';
Quill.register({
'formats/list': List,
'formats/list/item': ListItem
}, true);
However, when I attempt to create a list in the editor the code crashes in the List class with the following error:
ParchmentError {message: "[Parchment] Unable to create list-item blot", name: "ParchmentError"}
This happens on this line... https://github.com/quilljs/quill/blob/develop/formats/list.js#L99
I assume it relates to the imports I was forced to change, but I can't figure out what's wrong. I've not made any other changes to list.js. The original file has the following:-
import Block from '../blots/block';
import Container from '../blots/container';
Which I changed to this:-
import Quill from 'quill';
let Block = Quill.import('blots/block');
let Container = Quill.import('blots/container');
Is the way I am importing wrong? What is causing the error?
Figured it out (well a colleague did).
I needed to import Parchment like so :-
let Parchment = Quill.import('parchment');
instead of import Parchment from 'parchment';
This is because you'll end up with a different static Parchment class to the one used internally to Quill, so asking Quill for it's instance ensures you are both working with the same one (ie, the one where the blots were registered).
I came across that problem a couple hours ago.
In Quill's source code, List is a default export while ListItem is a named export.
So your import should look like this:
import List, { ListItem } from './quill/list';
Be sure to export them appropriately on your custom list.js file.
Good luck!
I'm trying to create a mixed ObjC-Swift framework. But I'm losing a lot of hairs trying to make a private module for my Swift files.
I followed some steps in iOS mixed dynamic framework - bridge objc headers with private module combined with some steps in https://stackoverflow.com/a/36878037/749438
Basically I have a module.modulemap now which has the following content:
module MyCore { //Adding 'framework' before module is giving me an "Umbrella not found"-error :/
umbrella header "MyCore.h"
export *
module * { export * }
explicit module MyCorePrivate {
header "MyCore_PrivateUmbrella.h"
export *
}
}
The MyCore_PrivateUmbrella.h imports all headers I want to privately expose to my Swift code. The reason behind it is just that it's easier to include 1 header in the module then all the to-be-exposed headers (since you need to include the specific paths to the headers...).
My build settings look like:
DEFINES_MODULE: YES
PRODUCT_MODULE_NAME: MyCore
CLANG_ENABLE_MODULES: YES
SWIFT_OBJC_INTERFACE_HEADER_NAME: MyCore-Swift.h
SWIFT_INCLUDE_PATHS: path to the directory of the module.modulemap
and last but not least; ALWAYS_SEARCH_USER_PATHS is set to NO
In my Swift files I import the module using import MyCore.MyCorePrivate. This works as expected and I can use my code from Objective-C.
Building the project gives me an error like this (the black bars only hide the project name and path to the file):
Now clicking the error brings me to the generated MyCore-Swift.h where the #import MyCore.MyCorePrivate is seemingly wrong.
I've got no idea as of why it's wrong, neither do I know how to fix this. Especially since it's a file generated by XCode.
Does anyone knows what's going down here?
You will need to modify the resulting framework after building it:
1) Don't create any private modules. Revert back to default settings.
2) Any code you want to expose to swift add to your framework header and make sure the headers are set as public in the build section or else swift code wont have access. (Use the <> syntax)
3) Any code from swift to objc make public.
4) Compile you project
5) go to your framework build directory (i.e MyFramework.framework)
6) open the framework header file in the headers directory of the framework (Myframework.h file)
7) Delete all the import statements that should have been private from the framework header
8) Delete all the .h files for the headers that should have been private from the headers directory ( you removed the import statements from the main framework header)
9) go to the .module file and remove the swift modules section
The module file should be very bare bones:
framework module MyFramework {
umbrella header "MyFramework.h" export * module * {export *}}
I have project structure like this
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And I'm trying to do stuff below in app.component-index.ts
import { HomeComponent } from 'components/home.component'
Typescript couldn't find this module and throws
error TS2307: Cannot find module 'home.component'
Typescript docs say next:
A non-relative import to moduleB such as import { b } from "moduleB",
in a source file /root/src/folder/A.ts, would result in attempting the
following locations for locating "moduleB":
/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts
So for my case I expect it would be like
/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component
Thanks in advance.
P.S. In my webpack.config I've setted root.resolve to src and everything bundles correct. Typescript-loader prints errors to terminal but everything is bundled and works correctly
So I can guess at the "why" portion of this but I'm relatively new to TypeScript. I have gotten this to work though so I'll try explaining based on that solution as best I can.
What you expect based on the TypeScript Docs would be mostly correct if:
'components/home.component'
were treated as a 'Non-relative import'. I'm fairly certain (based on the solution that worked for me) that TypeScript treats it as an absolute path from the 'compilerOptions.baseUrl' field in your tsconfig.json.
What worked for me was to set it like so:
{
"compilerOptions": {
"baseUrl": ".",
// Other options
}
}
Which essentially tells TypeScript to try and find something like
'components/home.component'
by looking in the same directory as the tsconfig.json file for a directory called 'components' and then to look for a file/directory within it called 'home.component'.
So if your structure looks like:
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And you set baseUrl to "." you would probably need to format your import like
import { HomeComponent } from 'src/home.component'
I'm new to Python and trying to understand classes. Not sure the following error is coming from the use of my IDE, which is Spyder, or if it is intended behaviour.
I define a class message in the file C:\mydir\class_def.py. Here is what the file contains:
class message:
def __init__(self,msg1,msg2):
self.msg1 = msg1
self.msg2 = msg2
I have another script were I want to execute code, called execute.py. In this script I import the class and make an instance of the class object. Here is the code from the script execute.py:
import os
os.chdir('C:\mydir')
from class_def import message
message_obj = message('Hello','world')
So far no problems!
Then I edit class_def.py to the following:
class message:
def __init__(self,msg1):
self.msg1 = msg1
and edit execute.py to match the new class, so removing one input tomessage:
import os
os.chdir('C:\mydir')
from class_def import message
message_obj = message('Hello')
and I get the following error:
TypeError: __init__() takes exactly 3 arguments (2 given)
It seems like Python keeps the old version of class_def.py and does not import the new one, even though it is saved.
Is this normal behaviour or is Spyder doing something funny?
If you have a .pyc file such as class_def.pyc, delete it.
I'd remove all .pyc files in your working directory and then try again. If that doesn't work, maybe you're not using the module you think you are? To be certain try something like:
import myModule
print myModule.__file__ #This will give you the path to the .pyc file your program loaded
#or
import myModule
import os
print os.path.dirname(myModule.__file__)
try those out so you can be certain that you're actually using the file you're modifying. Hope that helps!
I have a styles.less file that imports a variables.less file.
For theming purposes, I would like to have a theme.less file, which overrides the variables of variables.less.
My styles.less would look like
#import 'variables';
#import 'theme';
.my-class {
background: #bg;
}
The issue comes when the theme.less file doesn't exist (i.e. if I do not want to apply any theme), since LESS exists the compilation process after throwing the error.
Is there a way to make less throw a warning if the file doesn't exist and continue compiling?
Try this:
#import (optional) "foo.less";
font: http://lesscss.org/features/#import-directives-feature