I am using angular2 template install in visual studio (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack) for my project. I want to intergrate SASS but it throw exception "Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined".
This my webpack.config.js file:
var sharedConfig = {
resolve: { extensions: [ '', '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.css$/, loader: 'to-string!css' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } },
{ test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] }
]
}
};
and home.component.ts
#Component({
selector: 'home',
template: require('./home.component.html'),
styles: [require('./home.component.scss')]
})
I've faced with the same issue few days ago.
I was able to fix this by regenerating .net core app using yoman generator. It has the same template as the template pack but with newer packages.
npm install -g yo generator-aspnetcore-spa
yo aspnetcore-spa
Then I Installed all dependencies
npm install node-sass sass-loader raw-loader --save
Edited webpack.config module loaders
{ test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] },
Added scss file to component
#Component({
selector: 'counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.scss']
})
Created counter.component.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #ff0000;
p {
font: 100% $font-stack;
color: $primary-color;
}
Related
I am trying to integrate CKEditor5 in my Aurelia Application but no sucess.I tried many guides but getting no success.I tried CKEditor official guides too like as
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html
App.ts
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
export class App {
constructor(){
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic ],
toolbar: [ 'bold', 'italic' ]
} )
.then( editor => {
console.log( "Editor Initialized",editor );
} )
.catch( error => {
console.error( error.stack );
} );
}
}
app.html
<template>
<h1>${message}</h1>
<div >
<textarea name="editor" id="editor" cols="39" rows="21"></textarea>
</div>
</template>
WebPack.config
By official guide of CKEditor about webpack i was getting errors of loaders after some search i found a helo on github and did some modification in code like as
rules: [
{
// Or /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/ if you want to limit this loader
// to CKEditor 5 icons only.
test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: [ 'raw-loader' ]
},
{
// Or /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/ if you want to limit this loader
// to CKEditor 5 theme only.
test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '#ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
},
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? [{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
] : ['style-loader', ...cssRules]
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.ts$/, loader: "ts-loader", options: { reportFiles: [ srcDir+'/**/*.ts'] }, include: karma ? [srcDir, testDir] : srcDir },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
...when(coverage, {
test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i],
enforce: 'post', options: { esModules: true },
})
]
},
Now in console getting no error and CKEditor classes are also showing when inspecting DIV editor class but on View HTML showing no editor and seeing blank page.Kindly do help about this.
Your ckeditor create code cannot be in constructor.
The constructor of app runs before the dom was created, so it could not find '#editor'.
Move your editor create code to attached() callback.
attached() {
ClassicEditor.create...
}
I am just starting out with webpack.js and Laravel 5.4 (upgrading from 5.2)
I have just about everything sorted out but my build and sass requires an iconfont generator from svg.
In gulp and grunt this hasn't been an issue but cannot seem to figure out how to add a custom node and plugin to webpack in laravel 5.4
I am currently trying to use https://github.com/itgalaxy/webpack-webfont
in which there are minimal usage instructions, and I am totally lost as to how I A: call this plugin and B: where do I actually place this code? in the webpack.config.js? or do I call it from the webpack.mix.js?
import WebfontPlugin from '../../Plugin';
import path from 'path';
export default {
entry: path.resolve(__dirname, '../entry.js'),
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css/,
loaders: [
'style',
'css'
]
},
{
test: /\.scss$/,
loaders: [
'style',
'css',
'sass'
]
},
{
loader: 'url-loader',
test: /\.(svg|eot|ttf|woff|woff2)?$/
},
]
},
resolve: {
modulesDirectories: ["web_modules", "node_modules"]
},
plugins: [
new WebfontPlugin({
files: path.resolve(__dirname, '../svg-icons/**/*.svg'),
css: true,
cssFormat: 'scss',
cssTemplateFontPath: './fonts/',
dest: {
fontsDir: path.resolve(__dirname, '../scss/fonts'),
css: path.resolve(__dirname, '../scss/_webfont.scss'),
}
})
]
};
My scss files are not getting compiled. It doesn't understand what I do with my code. I want to be able to use Sass instead of CSS but I can't find the right way to compile Sass.
I am using the webpack template with Vue.js
My webpack config file looks like this:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js',
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.scss$/,
use: [ 'style-loader','css-loader','sass-loader' ],
loaders: ['style', 'css', 'sass']
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
One way of doing it is to have a single scss file as an entry. This is where all your different scss file gets imported. Something like this. Then you import that scss file in source code of your js entry file (in this case ./src/main.js). So when webpack reads your main.js it will see import './myscssfile.scss' and looks for a loader (or I think it does). Here is how I do my scss module in webpack2:
module: {
rules: [
// my js stuff
{ test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/ },
// my scss stuff
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: 'autoprefixer-loader',
options: {
browsers: 'last 2 version'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
}
]
}
I hope it works.
Just use <style lang="sass"></style in your component. Let me know if it helps.
I've spent last few hours to set up a new project utilizing Webpack 2 and Babel 6.
The problem I have is non working debugger (any browser). Breakpoints are simply ignored. Using debugger; works fine but browser does not breaks execution exactly in that line.
webpack.config.js:
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "src", "index.js"),
output: {
filename: "app.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
devServer: {
contentBase: path.resolve(__dirname, "dist")
}
};
.babel.rc:
{
"presets": [
"latest"
]
}
I'm running the whole thing with webpack-dev-server -d
devtool: "source-map", option in webpack config should solve your problem.
entry: ['babel-polyfill', './src/index.jsx'],
output: {
filename: 'js/bundle.[hash].js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
config: path.join(__dirname, `config/${env}.configuration.js`)
}
},
**devtool: "source-map",**
module: {
rules: [
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery'
}
]
},
I don't want to bundle fonts and images but i need sourceMaps
I have this config (irrelevant parts ommited):
output: {
path: './build/',
publicPath: 'http://localhost:3000/',
filename: '[name].js'
},
module: {
loaders: [
{ test: /\.scss$/, loaders: ['style','css?-url,sourceMap', 'sass?sourceMap'] }
]
}
With this config I get multiple errors in Chrome:
Failed to decode downloaded font: http://localhost:3000/
(index):1 OTS parsing error: invalid version tag
I read a lot of answers and some solutions for similar problem:
1. get rid off 'sourceMap' - it works, and fonts are correctly displayed BUT ... no sourceMaps
2. change publicPath to URL - done it
I cannot find any solution that allows me load fonts outside bundle AND have CSS with sourceMaps...
I just figured it out. The key to solution is ExtractTextPlugin that makes normal link tags instead of 'blobs' and all fonts work super, css are external (even better when they are large), source maps work. Here is my full config if anyone interested:
var path = require('path');
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
demo: ['./demo/index.ts', 'webpack-dev-server/client?http://localhost:3000'],
lib: ['./src/js/index.js']
},
output: {
path: './build/',
publicPath: '/',
filename: '[name].js'
},
debug: true,
devtool: 'source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: 'ts' },
{ test: /\.coffee$/, loader: 'coffee' },
{ test: /\.(png|jpg)$/, loader: 'url' },
{ test: /\.jsx?$/, loader: 'babel', query: { presets: ['es2015'] }, exclude: /node_modules/, },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap') },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[\s\S]+)?$/, loader: 'url' }
]
},
devServer: {
contentBase: './demo'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new ExtractTextPlugin("[name].css", { allChunks: true })
]
};