Sorry for this question, but I really cant't understand.
Svg and styles not loaded in projects. Svg in Network console loaded on this adress: http://localhost:9000/%7B'./images/Browser.svg'%7D
I see extra character..
My webpack conf:
{
mode: 'development',
entry: __dirname + '/IE/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
},
target: ['web', 'es5'],
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './IE/ieMock.html'),
}),
],
module: {
rules: [
{ test: /\.html$/i, loader: 'html-loader' },
{
test: /\.s?css$/i,
use: ['style-loader', 'css-loader'],
},
{ test: /\.svg$/, loader: 'svg-inline-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
// targets: {
// ie: '11',
// },
},
],
],
},
},
},
],
},
};
ieMock.html:
<!doctype html>
<html xmlns="http://www.w3.org/1999/html" lang="en">
<head>
<title>Предупреждение</title>
<meta charset="utf-8">
<link rel="stylesheet" href="IE/index.css">
<link href="./src/assets/styles/normalize.css" rel="stylesheet">
<link href="./src/assets/styles/font-awesome.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<main>
<div className="ie-support-container">
<div className="ie-support-container__el">
<p>
Переходите на ЯндексБраузер.
</p>
</div>
<div className="ie-support-container__el">
<div className="browser_label">
<img src={'./images/Browser.svg'} />
<span>Браузер</span>
</div>
<div className="browser_label">
<img src={'./images/YandexBrowser.svg'} />
<span>Яндекс Браузер</span>
</div>
</div>
</div>
</main>
</body>
</html>
index.js
import './ieMock.html';
import './index.css';
What am I doing wrong? Why svg loaded with extra character?
Related
I have the entry component in reactjs:
import React from "react"
import ReactDOM from 'react-dom';
import App from "./js/components/App.js"
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
I am trying to style in the root element inside of my css file, index.css:
#root {
background-color: brown;
height:100vh;
width:100vh;
}
The background though is not brown. When looking at the styling the browser renders I cannot see any of these attributes being applied to the root element.
This is my webpack config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: ['css-loader'],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
It is as if it is not loading the index.css file at all.
You cannot style the #root of your app. Just style the className of <App /> component, for example:
const App = () => (
<div className="app>
// ...
</div>
)
css file:
.app {
background-color: #ffffff;
background-color: brown;
height:100vh;
width:100vh;
}
When using webpack, i think you have to specify your entry points of your css/js files like this...
entry: [
"./src/js/index.js",
"./src/sass/style.scss",
],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'assets/js')
},
module: {
rules: [
/* you code here */
...
...
I'm building a web app using visual studio 2015 and angular 4.x
I have followed this tutorial
But i keep getting the error
Unexpected token <
my main .ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
wwwroot structure
_Layout.cshtml looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script>
System.import('wwwroot').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
systemjs.config.js
(function (global) {
System.config({
map: {
'rxjs': 'node_modules/rxjs',
'#angular': 'node_modules/#angular',
'app': './app',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api'
},
packages: {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'#angular/platform-browser': {
main: 'bundles/platform-browser.umd.js'
},
'#angular/core': {
main: 'bundles/core.umd.js'
},
'#angular/http': {
main: 'bundles/http.umd.js'
},
'#angular/compiler': {
main: 'bundles/compiler.umd.js'
},
'#angular/compiler-cli': {
main: 'index.js'
},
'#angular/router': {
main: 'bundles/router.umd.js'
},
'#angular/upgrade': {
main: 'bundles/upgrade.umd.js'
},
'#angular/forms': {
main: 'bundles/forms.umd.js'
},
'#angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'#angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js'
},
'#angular/platform-server': {
main: 'bundles/platform-server.umd.js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
index.html
<app-root></app-root>
I'm not able to go any further.
Can anybody guide me?
Thanks!
I have tried different settings, but nothing seems to work, I need to repeat events on calendar, like all Sundays, Tuesdays. Here is my code:
$('#appointment_calendar').fullCalendar({
header: {
left: 'prev',
center: 'today',
right: 'next'
},
events: [{
title:"My repeating event",
start: '10:00',
end: '14:00',
dow: [ 1, 4 ]
}],
});
Have tried removing/adding tittle, start, end, ranges, nothing seems to works.
In version 4 and above you have to use "daysOfWeek" instead of "dow".
Also you should use "startTime" and "endTime" instead of "start" and "end".
So your code should be change to :
$('#appointment_calendar').fullCalendar({
header: {
left: 'prev',
center: 'today',
right: 'next'
},
events: [{
title:"My repeating event",
startTime: '10:00',
endTime: '14:00',
daysOfWeek: [ 1, 4 ]
}],
});
I have done some testing and it appears that FullCalendar fails with dow above version 3.4.0.
The following code is identical but for the FullCalendar version.
FullCalendar 3.4.0 (OK)
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
</head>
<body>
<main>
<div class="inner">
<div class="full">
<h1>Events Calendar</h1>
<div id="calendar">
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
timezone: 'local',
firstDay: 1,
timeFormat: 'H:mm',
events: [{
title: 'All Day Event',
start: "2018-04-25T09:00:00",
dow: [3,4,5]
}]
});
});
</script>
</div>
</div>
</main>
</body>
</html>
FullCalendar 3.5.0 (FAIL)
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js'></script>
</head>
<body>
<main>
<h1>Events Calendar</h1>
<div id="calendar">
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
timezone: 'local',
firstDay: 1,
timeFormat: 'H:mm',
events: [{
title: 'All Day Event',
start: "2018-04-04T09:00:00",
dow: [3,4,5]
}]
});
});
</script>
</main>
</body>
</html>
jsFiddle with FullCalendar v3.4 (working)
jsFiddle with FullCalendar v3.5 (failing)
I'm learning about CSS Modules at the moment, and they look like they will solve a lot of problems. But all the documentation is based on CSS, I want to use SASS.
Is this possible? For example, how could I make the following statement work?
.normal {
composes: common;
composes: primary from "../shared/colors.scss";
}
./scss/import.scss
.myImportClass {
background-color: #f00
}
./scss/style.scss
.btn {
padding: 20px;
border: 1px solid #000;
}
.newBtn {
composes: btn;
composes: myImportClass from './import.scss';
border: 5px solid #f00;
}
module part in your webpack.config.js
module: {
rules: [
{
test: /\.scss/,
use: [
{
loader:'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
}
]
}
Your teststyle.js (ES6 / ES7):
import React from 'react';
import style from './scss/style.scss';
const TestStyle = () => {
render() {
return (<div>
<button className={style.newBtn}>my button</button>
</div>)
}
}
default export TestStyle;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack CSS composes</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
entry point app.js
import React from 'react';
import TestStyle from './teststyle';
React.render(
<TestStyle />,
document.getElementById('app')
);
// UPDATE
convert webpack config to webpack 3
make teststyle.js a stateless function
it's a problem of css-loader, try to add the option importLoaders: 1, in css-loader webpack config (https://webpack.js.org/loaders/css-loader/#importloaders)
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
},
}
Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?
I did not see difference between MVC2 and other types of applications...
You should read about dojo grid
First of all you need to load dojo script (it would be better if you do it on master page).
Also you can add some css styles that dojo grid using:
Site.Master:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table
{
margin: 0;
}
</style>
...
</head>
....
</html>
After that you should add some code in view for initialize dojo grid, E.g.:
Index.aspx:
...
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var layoutCountries = [
[{
field: "abbr",
name: "Abbeviation",
width: 10
},
{
field: "name",
name: "Name",
width: 10
},
{
field: "capital",
name: "Capital",
width: 'auto'
}]];
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito'
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo'
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador'
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo'
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara'
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn'
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa'
}]
}
</script>
<div style="width: 400px; height: 300px;">
<div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
</div>
<div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
queryoptions="{deep:true}" query="{}" rowsperpage="40">
</div>
</div>
...
And the result of this code is: