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>`;
Related
I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.
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 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.
This whole time i have have been learning handlebars/backbone/marionette and have been writing everything inline in one file, so there was no need for export/import.
But if i am making a file specifically for handle bars how do i go about exporting it (not talking about using it in script tags, i am talking about es6 exports) and how do i import the file in a JS file so that i can use the template.
lets say I have a .hbs file like this
<div id="listItem-container">
<h1>List Item Container</h1>
</div>
how do i import it in a js file like this
import ListView from '../../template/listView';
I don't think you can import hbs files directly, but you can use node's File System package to do it.
You can do something like this
import fs from 'fs';
import path from 'path';
const listView = fs.readFileSync(path.resolve(__dirname, `../../template/listView`), 'utf8');
Of course you would also need to import the handlebars package and transform the template with the data, otherwise you will end up with stuff like {{var}} in your output.
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.