I'm using Conemu, and I’ve installed everything from zsh to sass.
I'm trying to convert variables.scss to variables.css, so I type this command:
sass variables.scss:variables.css
But I get an error
Errno:ENOENT: No such file or directory # rb_sysopen - variables.scss
Related
I have been trying to import SCSS files with an absolute path for 2 days now...
My folder structure:
src
|--assets
|--|--styles
|--|--|--_variables.scss
|--UI
|--|--Layout.module.scss
I would like to import variables and functions from _variables.scss to Layout.module.scss using an absolute path to avoid my code from breaking when changing the folder structure.
I am using the live sass compiler extension in VS code which trows the error
Error: Can't find stylesheet to import.
when I try to import a scss file using an absolute path like #import 'src/assets/styles/variables' .
Relative paths work just fine
I tried several things:
Using the sass-loader includePaths option and including the src folder
Using the webpack module.resolve object in the config file to add the src folder to the folder that will be searched when trying to import modules and then using the ~assets/styles/variables path
Using webpack module.alias object in the webpack config file to define an alias for the src folder and then use it like so Styles/variables
I looked up a lot of similar problems but neither of the solutions would help solve my problem. I would appreciate any possible solution!
I'm trying to add a variable to my .env file,
so here is the steps I followed
1- I created a .env file in the root directory of the project, under the src directory
2- I added this variable
REACT_APP_BASE_URL='lablabla'
3- I tried to access it from my app.tsx in the same directory (I'm using TS for the whole app)
console.log("lol: ", process.env.REACT_APP_BASE_URL)
And I get undefined at my console
Things I have tried:
I tried to install dotenv and use
require('dotenv').config()
and I ran into a lot of issues, so I decided to remove it as I learned it came out of the box already with react app
under the src directory 2- I added this variable
What do you mean by that?
Create .env file under root directory.
Add this content
REACT_APP_BASE_URL='My-content'
In App.jsx get it this way
console.log(process.env.REACT_APP_BASE_URL);
It's important to start your env variables with prefix REACT_APP_ and once you modify it reload the dev server.
I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:
A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b
The React app's .tsx components will pull from project-a's .ts files.
I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!
When I run the application, Webpack complains:
./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export enum Position {
| Inner = 0,
| Outer = 1
I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?
The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.
Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?
You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.
The type infos you get from external packages is delivered via the .d.ts file alongside the package.
When you import other packages, you always import the Javascript file.
Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript.
But you are trying to import a Typescript file during runtime.
I'm trying to import in Typescript some SVG icons, but I'm facing some problems.
At the first time I tried to import them, Typescript wasn't able to recognize the file extension.
I solved this issue by creating, as suggested in other Stack Overflow and Github topics, a custom.d.ts file with this rule inside:
declare module "*.svg" {
const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
But the problems seem to not finish here, even if the compilation seems going fine.
The current project I'm working on, is structured this way:
Typescript + React package (with SVG icons files) (SDK)
React Internal Sample page (package) to use the SDK
other internal packages...
For our development phase, we build through Webpack all the packages through different loaders and see the result through the Sample page.
But the final product flow to production is quite different: I export the SDK as CommonJS to an internal NPM Registry so another company can use it in a React project (the equivalent of the Sample page but for production) and push to production the final Webpack bundles with both projects inside.
So, to load in the Sample application the SVG icons, I'm using #svgr/webpack loader, which converts the files.
But when I have to export the SDK through npx tsc, I see that the exported folder, does not contain the folders with svg files.
I've tried to include them in tsconfig.json/files, but got this error:
TS6054: File '<path>/*.svg' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
So, to attempt exporting them I converted my exporting script to use #svgr/cli to export the files to React files from SVGs before compiling to typescript:
// package.json
scripts: {
"build-ts": "rm -rf ./lib; yarn convert-svg-to-react; npx tsc",
"convert-svg-to-react": "npx #svgr/cli -d src src --typescript",
}
In this way, I get the new Typescript files mixed with the SVGs inside the package (so I'll have to remove them later) and I can see them in the exported folder lib.
But watching inside the Typescript exported code, I can see this line (for each svg import):
var close_svg_1 = __importDefault(require("./icons/close.svg"));
Leaving out the Typescript function for Babel __importDefault, you can see that it still requires the file svg, but what I have at this point, are the React components that replaces those files.
During development it works fine because #svgr/webpack loader, resolves the svg files.
But requiring svg files that do not exist, should make the application above it crash.
So, I'm stuck and I need some clues to get out of this situation.
Some clues that I got (but wasn't able to find how to do that), were:
[Best] Find how I can export raw svg files as they are during Typescript compilation without doing that manually, as they are not all in one folder but divided per components areas in the package tree. Doing this, I would tell the other company to add #svgr/webpack to its own building process.
Find how can I tell Typescript to import svg files without specify the extension (currently, removing .svg probably makes it fallback to .ts/tsx and therefore it cannot find the file with that name). In this way, the require would keep requiring the same file name but I could convert SVG to React Components without occurring in problems. But this would also require Typescript to export the file
Otherwise, I should convert all the SVGs in React components and directly use them instead of making them being compiled by #svgr/webpack, but I'm not sure this would have some other side-effects.
Any other clues or any way to achieve the ideas I got? Thank you everybody.
Environment:
Mac OSX Mavericks 10.9.4
Compass 1.0.1 (Polaris)
Compass-blueprint (1.0.0)
Sass 3.4.5 (Selective Steve)
sencha app build testing command no error
When I compile app.scss file in the ./resources/sass/ directory, an error happened.
compass compile app.scss
error app.scss (Line 209 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss: File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff)
File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff
And then I copy touch/resources/themes/fonts folder to resources/sass/ folder and then this error fixed.
But I doubt why this will happen when in the version 2.3.2 ( sencha touch) I have used compass to compile correctly.
Then there is another error:
compass compile app.scss
error app.scss (Line 42 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.)
Sass::SyntaxError on line ["42"] of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.
Run with --trace to see the full backtrace
And now I can't fix it.
This is the content of app.scss:
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..
// Examples of using the icon mixin:
// #include icon('user');
config.rb:
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
Thanks to #Saki . I pick one sentence from sencha official blog to help other people meet this problem:
With the introduction of Ext JS 4.2 and theme packages, compass watch
no longer understood the structure of themes making “sencha ant sass”
the only option for building Sass. The “sass” build step, however, was
a forced, full rebuild and was many times slower than compass watch.
This is the link: http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/