I'm using ASP.NET Core Template Pack (Angular 2 , Net core ,webpack) (plugin website)
Now I need to use a css file that is not located in mycomponents folder.
My folder structure :
screenshot
Component
import { Component } from '#angular/core';
#Component({
selector: 'app',
template: require('./app.component.html'),
styles: [require('./mystyle.css')]
})
export class AppComponent {
}
and I ran the command :
webpack --config webpack.config.vendor.js
I still get the error
Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "./mystyle.css"
Can someone help me ?
Thanks
Your css file is located in different folder.
Path to your custom css should be [require('../../../assets/css/mystyle.css')]
Please note it that there is already created css file for app.component by default.
Related
According to the documentation in the latest NextJS I can use a style sheet (bootstrap) by doing the following:
pages/_app.js
import '../static/bootstrap.min.css'
// this default export is required in a enw file
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Then I can run my project and utilize bootstrap.
When I do the above I get the following error:
[ error ] ./static/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/postcss-loader/src??__nextjs_postcss!./static/bootstrap.min.css)
Module not found: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Volumes/OGX/Code/itsyoo/static'
Any idea how I can resolve this?
It says that fonts can't be found in the directory. You can put fonts there or use npm package.
I suggest to install Bootstrap with npm.
npm i bootstrap
Include it in the _app.js like import 'bootstrap/dist/css/bootstrap.min.css'.
I'm currently trying to build a shared component library that I can use across my different projects.
This is my index.js file:
import Avatar from "./components/Avatar";
import Heading1 from "./components/Heading1";
import styles from "./global.css";
export { Avatar, Heading1 };
The reason I am loading global.css is because I want to use a custom font.
When I run babel src -d build, it seems to skip my CSS file:
myapp-ui edmund/theming % npm run build
> #myapp/ui#0.1.0 build /Users/edmundmai/Documents/src/myapp/myapp-ui
> babel src -d build
src/components/Avatar.js -> build/components/Avatar.js
src/components/Heading1.js -> build/components/Heading1.js
src/index.js -> build/index.js
src/stories/Avatar.stories.js -> build/stories/Avatar.stories.js
src/stories/Headling1.stories.js -> build/stories/Headling1.stories.js
src/theme.js -> build/theme.js
When I go into one of my apps and try to load this shared component library, it also throws an error about a missing CSS file:
Failed to compile.
../myapp-ui/build/index.js
Module not found: Can't resolve './global.css' in '/Users/edmundmai/Documents/src/myapp/myapp-ui/build'
How would I load a CSS or custom font for a shared component library?
Here is my situation :
Web site powered by Angular 4
Initialised with Angular Starter Kit
Using Semantic UI as CSS framework
Here is my issue :
Adding Semantic UI to webpack has no effect.
Here is what I tried :
(I followed the official Angular documentation for webpack)
Add semantic-ui to package.json from terminal
npm install semantic-ui-css --save
Add vendor bundle to the entry property in webpack.common.js
[...]
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'vendor': './src/vendor.ts'
},
[...]
Create the src/vendor.ts file and set its content to :
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// My CSS framework
import 'semantic-ui-css';
What I got :
Webpack build without error, the vendor bundle is created :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor
And webpack inject the bundle script in the HTML page :
<script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body>
But the visual doesn't change (but should I check it with CDN) and I don't see the vendor.bundle.js file in the dist folder.
I probably miss something, what is it ?
Below statement only imports semantic.js as package.json is pointing
to that file.
import 'semantic-ui-css';
To import CSS, you can add the below:
// To import CSS
import 'semantic-ui-css/semantic.css';
OR in src/styles/styles.scss
#import '../../node_modules/semantic-ui-css/semantic.css';
the remote file is a single components compiled by webpack
the wenpack config as follow:
{
.....
library: library
,externals: externals
,libraryTarget: "umd"
.....
}
the components is in the cdn,
i want to load and use the remote components in react.
and how to use it like the Pseudo code :
ajax -> get a json > { components name } > use the name to load romote file
for example the json have the botton i need to load the botton.min.js
var Button = reuqire('http://botton.min.js')
class App extends React.Component {
render() {
return (
<div>
<Botton/>
</div>
);
}
}
export default App;
npm install scriptjs
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
As I said in the other post: I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
More info here: https://stackoverflow.com/a/62603539/8650621
Basically, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.
Maybe you can find solutions on the following resoures:
https://stackoverflow.com/a/33293033/1204375
how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
Webpack and external libraries
How to use a library from a CDN in a Webpack project in production
https://github.com/webpack/webpack/issues/150
https://github.com/webpack/webpack/issues/240
I'm trying to run a typescript project (I'm using vs2012) and to import angular 2.
the projects is set to AMD module system and ECMAcript 5
In ts filed I'm importing the module:
import ng2 = require('angular2/angular2');
=> in js file it replaced to:
define(["require", "exports"], function (require, exports) {
And I'm getting this require.js runtime error:
Mismatched anonymous define() module: function (require, exports) {
....
// code
....
}
Is anyone knows what the cause of it?
Thanks a lot!
Lior
Try using the new ES6 syntax for importing files.
Example: import {bootstrap} from 'angular2/angular2';
This Angular2 Visual Studio tutorial can help you setup your project.