I am trying to understand some JavaScript source code and at the top of the .js file I am seeing this:
import './style.scss';
I'm already confused. Sass is supposed to be converted to CSS. JavaScript and CSS are typically completely separate. Why would you import Sass into JavaScript?
You might want to look into JSX and React:
https://reactjs.org/docs/introducing-jsx.html
JSX is an extension of Javascript that allows you to add HTML code.
You wouldn't import Sass into a javascript file, you would import it in a JSX file and use it to link an element to a particular className.
Related
I'm really confused by this file index.js:
import Cookies from 'js-cookie';
import createHash from 'sha.js';
import Evaporate from 'evaporate';
import SparkMD5 from 'spark-md5';
import './css/bootstrap-progress.css';
import './css/styles.css';
...
Why would you import a .css file in a .js file? I've never seen this before. Is this common? What does it allow you to do?
The repository appears to be using Parcel. See
Parcel's docs on CSS:
Parcel includes support for CSS out of the box. To add a CSS file, either ... ... or import it from a JavaScript file:
import './index.css';
What it will do is, if that JavaScript module is included, when the module is imported, it will insert the CSS (from that ./css/styles.css path in the source code) onto the page. It's not a native JavaScript functionality of ES6 modules - it's something that a bundler (like Parcel, or Webpack, etc) manages. When bundling, the CSS text will be turned into a JavaScript string somewhere in the resulting bundle, and then put onto the page with something like
const style = document.createElement('style');
document.body.appendChild(style);
style.textContent = `<CONTENT OF IMPORTED CSS>`;
We have lot of pages and lots of stylesheets. We wanted to inline some critical styles on some components to avoid network requests; I'd achieved the requirement by using style-loader with inline import in webpack 4 like this:
import React from "react";
import "./style.sass";
import FancyButton from "components/UIkit/FancyButton";
to: (!! at the beginning will disable all configured loaders)
import React from "react";
import "!!style-loader!css-loader!sass-loader!./style.sass";
import FancyButton from "components/UIkit/FancyButton";
this works fine and injects the scss into <style></style> tag; BUT in won't minfiy css.
I need a way to minify them too; preferably using inline import commands, magic comments or something like this:
!style-loader!require('mini-css-extract-plugin').loader!css-loader!less-loader!./style.less
our webpack config is ejected version create-react-app with slight modification to meet our needs. and for normal imports it works perfectly fine; and minifies all the csss using MiniCssExtractPlugin. but Inlining imports won't follow the default pipeline and hence no minification.
I also welcome other suggestions to inline critical styles; (consider they can be .scss, .less, .module.scss)
excluding this way:
Inline CSS using Webpack
I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.
I have a couple of js and css files which were custom built and i want to include that into my vue cli3 project.
Is there any way to import those files into my project ?
For custom js files, write all your logic in a object and export it at the end of the file :
const customJs = {
/* custom javascript here */
}
export default customJs;
and then import it where you need it as :
import * as customJs from '../path/to/file.js'
For custom css files, you can use #import between the style tags like this:
#import './../node_modules/foo/bar.css';
You can use a pre-processor when creating the project with vue-cli.
See: Working with CSS
Or if you don't need a pre-processor and you are using CSS modules you can go for this route
See: CSS Modules
As for JavaScript it's pretty straight forward if you are on ES2016/ES6 just use the syntax
import tool from 'toolmodulename';
Try this in main.js
import "path-your-css/your-css.css";
I have a React app with dozens of files and I don't use any import / export statements. I have a _references.js file that helps intellisense reference components to each other.
I'm looking for a WYSIWYG component to use in my app but all examples show import statements like this:
import { Editor } from 'react-draft-wysiwyg';
When I type this in my JSX file I get:
JSX illegal import declaration
Do I have to configure Visual Studio (2015) differently in order to use this? What is the deal with this syntax and what are the rules around using it?
I am using react for .net so I assume this is what prevents imports from working... but if that is true, then what is the workaround?