Related
I have one project with webpack and i want to add vue to this.
Vue work (function via mounted() show console.log), but i can't render template from sfc component.
Not errors in console.
This trouble component Departments.vue:
<template lang="pug">
.cont
.department 111
</template>
<script>
export default {
name: 'departments',
data() {
return {
deps: '',
}
},
props: {
list: {
type: String,
default: ''
}
},
beforeMount() {
console.log('before');
},
mounted() {
console.log('mount');
}
}
</script>
html(just on the one single page):
<div id="app">
<hr/>
lala <br/>
<departments list='vue list'></departments>
<hr/>
<test></test>
</div>
in app.js:
import { createApp } from 'vue'
import departments from './components/Departments.vue';
const app = createApp({
data() {
return {
count: 134
}
},
// components: {
// departments,
// },
})
app.component('departments', departments)
app.component('test', {
template : '<div><h1>This is coming from component</h1></div>'
})
app.mount('#app')
For testing i added test component inline into app.js - and it's worked!
Here result:
my broken component showing '< ! ---- >' symbols...
package.json
{
"name": "---",
"version": "1.0.0",
"description": "just show me vue templates",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#vue/compiler-sfc": "^3.2.37",
"autoprefixer": "^10.4.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"browser-sync": "^2.27.10",
"browser-sync-webpack-plugin": "^2.3.0",
"chartist-plugin-pointlabels": "^0.0.6",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"cssnano": "^5.1.12",
"html-webpack-plugin": "^5.5.0",
"jquery": "^3.6.0",
"jquery-mask-plugin": "^1.14.16",
"jquery.cookie": "^1.4.1",
"jquery.photoswipe": "^1.1.1",
"magnific-popup": "^1.1.0",
"mini-css-extract-plugin": "^2.6.1",
"node-loader": "^2.0.0",
"node-sass": "^7.0.1",
"nouislider": "^15.6.0",
"photoswipe": "^5.2.8",
"postcss-loader": "^7.0.1",
"pug": "^2.0.4",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.1.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"swiper": "^8.3.1",
"url-loader": "^4.1.1",
"vue-loader": "^17.0.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.7",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"#babel/core": "^7.18.6",
"afterglowplayer": "^1.1.0",
"bigpicture": "^2.6.2",
"chartist": "^0.11.4",
"clean-webpack-plugin": "^4.0.0",
"file-loader": "^6.2.0",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"lity": "^2.4.1",
"vue": "^3.2.37",
"vue-click-outside": "^1.1.0"
}
}
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: { main: './src/js/app.js' },
output: {
path: path.resolve(),
filename: '../js/bundle.js'
},
target: 'node',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false,
},
},
'postcss-loader',
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /\.(png|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/plugins'
}
}]
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: { baseDir: [path] }
}),
new CopyWebpackPlugin({
patterns:[
{from: 'src/img/', to: '../images/',},
{from: 'src/fonts/', to: '../fonts/',}
]
}),
new ImageminPlugin({
pngquant: {
quality: '100'
},
}),
new MiniCssExtractPlugin({
filename: '../template_styles.css',
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new VueLoaderPlugin(),
],
};
can you help me with this error?
I am developing my first application in VUE
I have created a styles file at the root of the project and another with the fonts I want to use globally.
I'm trying to modify the styles of the components to be able to declare "" and thus be able to use these styles globally.
Following the official documentation and articles on the subject I do not see the solution to a bug that launches the console
"ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue"
here is my vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/styles/_variables.scss";`
}
}
},
}
and here my webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
prependData:
`#import "#/styles/_variables.scss";`
}
}
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// prependData:
// `#import "#/styles/_variables.scss";`
resources: [
path.resolve(__dirname, '../src/styles/_variables.scss')
]
}
}
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
and here my App.vue
<template>
<div id="app">
<div class="container">
<ciev-app-header />
<router-view></router-view>
<hr>
<ciev-app-footer></ciev-app-footer>
</div>
</div>
</template>
<script>
import Header from './components/Shared/Header';
import Footer from './components/Shared/Footer.vue';
export default {
name: 'app',
components:{
'ciev-app-header': Header,
'ciev-app-footer': Footer
},
created () {
this.$store.dispatch('tryAutoLogin')
}
}
</script>
<style lang="scss">
#font-face {
font-family: 'RalewayRegular';
src: local('RalewayRegular'),
url(./fonts/Raleway-Regular.ttf) format('truetype');
font-style: normal;
}
body, html {
margin: 0;
font-family: 'RalewayRegular', sans-serif;
}
</style>
Someone who can tell me what I'm doing wrong.
Thank you in advance for your time and help.
my package.json
{
"name": "vue-cli",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Miguel Alvarez Gomez <miguel.alvarez#softtek.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.19.2",
"style-resources-loader": "^1.3.3",
"vue": "^2.5.11",
"vue-router": "^3.3.4",
"vuex": "^3.5.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.3",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
You can use style-resources-loader plugin like this in vue.config.js file
vue.config.js
const path = require('path');
module.exports = {
...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
// load which style file you want to import globally
patterns: [path.resolve(__dirname, './src/styles/_variables.scss')],
},
}
};
Edit: if this doesn't work, add this to your webpack.config module.rules array. It will tell webpack to use sass loader for your .scss files
{
test: /\/.scss$/,
loaders: ['style', 'css', 'sass']
}
After a lot of searching and trying different solutions I have found this article and following it step by step has worked perfect for me.
Only by installing the file-loader and adding the highlighted fields in the article to my webpack I have solved the problem.
I leave you the link in case someone is in the same situation.
https://chriscourses.com/blog/loading-fonts-webpack
Thank you for your help.
router-link does not give an error, but it does not work. It only shows a string.
I tried all posts about this issue but none of them worked.
Please help
Here is my file:
webpack.config.js
/* eslint-disable */
var webpack = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
require('dotenv').config();
function isProduction() {
return process.env.NODE_ENV === 'production';
}
module.exports = {
mode: process.env.NODE_ENV,
watch: !isProduction(),
watchOptions: {
aggregateTimeout: 500,
ignored: ['node_modules']
},
resolve: {
alias: {
Router: path.resolve(__dirname, 'src', 'router'),
Store: path.resolve(__dirname, 'src', 'store'),
Pages: path.resolve(__dirname, 'src', 'pages'),
Components: path.resolve(__dirname, 'src', 'components'),
Directives: path.resolve(__dirname, 'src', 'directives'),
Filters: path.resolve(__dirname, 'src', 'filters'),
Images: path.resolve(__dirname, 'src', 'images'),
Styles: path.resolve(__dirname, 'src', 'styles'),
Plugins: path.resolve(__dirname, 'src', 'plugins'),
Mixins: path.resolve(__dirname, 'src', 'mixins')
}
},
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
filename: isProduction() ? 'assets/main.[contenthash].js' : 'assets/main.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js\vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
fix: false,
failOnWarning: true
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: function (file) {
return /node_modules/.test(file) && !/\.vue\.js/.test(file);
}
},
{
test: /\.s?css$/,
use: [
// consider vue-style-loader if not production?
// 'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
// see postcss.config.js for options
'postcss-loader',
'sass-loader',
]
},
{
test: /\.pug$/,
oneOf: [
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: isProduction() ? 'assets/style.[contenthash].css' : 'assets/style.css'
}),
new HtmlWebpackPlugin({
template: 'src/index.pug'
}),
new webpack.DefinePlugin({
'process.env': {
LINKEDIN_CLIENT_ID: JSON.stringify(process.env.LINKEDIN_CLIENT_ID),
API_URL: JSON.stringify(process.env.API_URL),
MIXPANEL_KEY: JSON.stringify(process.env.MIXPANEL_KEY),
WEB_APP_URL: JSON.stringify(process.env.WEB_APP_URL),
}
}),
new CopyWebpackPlugin([
{
from: 'src/images',
to: 'assets/images'
},
]),
]
};
/* eslint-enable */
index.js
import 'Styles/main.scss';
import Vue from 'vue/dist/vue.js';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
Vue.config.productionTip = false;
import App from 'Components/App.vue';
const CompanyPage = {template: '<div>foo</div>'};
const CompanyData = {template: '<div>bar</div>'};
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Company Page',
component: CompanyPage
},
{
path: '/company-page',
name: 'Company Page',
component: CompanyPage
},
{
path: '/company-data',
name: 'Company Data',
component: CompanyData
}
]
});
const app = new Vue({
router,
render: createEle => createEle(App)
}).$mount('#app');
App.vue
<template>
<div id="app">
<top-nav/>
<div class="wrapper">
<breadcrumbs/>
<div class="content">
content
</div>
<left-nav/>
</div>
<router-view></router-view>
</div>
</template>
<script>
import TopNav from 'Components/TopNav.vue';
import Breadcrumbs from 'Components/Breadcrumbs.vue';
import LeftNav from 'Components/LeftNav.vue';
export default {
components: {
TopNav,
Breadcrumbs,
LeftNav
},
name: 'App'
};
</script>
LeftNav file
<template>
<div class="leftnav">
<ul >
<li>
<router-link to="/company-page">
Company Page
</router-link>
</li>
<li><a href="#">Co
</a></li>
<li>
<router-link
to="/company-data"
>
Company Data
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'LeftNav'
};
</script>
package.json
{
"name": "frontend-assignment",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "8.4.0",
"npm": "5.4.1"
},
"scripts": {
"clean:build": "./node_modules/.bin/rimraf build",
"predev": "npm run clean:build",
"dev": "cross-env NODE_ENV=development ./node_modules/.bin/webpack-dev-server",
"lint": "node_modules/.bin/eslint \"src/**/**.+(js|vue)\"",
"test": "node_modules/.bin/jest",
"start": "npm run dev"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "2.6.8",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"clean-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.1",
"cssnano": "^4.1.7",
"dotenv": "^6.1.0",
"eslint": "5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^22.1.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-vue": "^5.0.0-beta.5",
"faker": "^4.1.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.6.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.0",
"url-loader": "^1.1.2",
"vue-jest": "^3.0.1",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.8",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
This happened to me recently after upgrading vue-router from 3.0.1 to 3.1.5 - It may be a version incompatibility issue or a bug in 3.1.5. After downgrading everything started working again fine.
I'm trying to update my Aurelia project that uses webpack so I can require .scss files in my templates. I've looked at the Aurelia Skeleton project for webpack and have followed this guide to come up with my webpack.config which is listed below. I have also included my package.json file.
I am able to load styles now, but have come across a perplexing issue. None of the my bind statements work anymore. The code itself didn't change and was working fine before this update attempt. I tried using two-way, one-way, etc, but that didn't work either. The #bindable property is always undefined.
<my-custom-element value.bind="something"></my-custom-element>
In MyCustomElement, value is always undefined although something is set properly.
I have tried walking back the package versions and I think it has to do with aurelia-bootstrapper, but I'm not sure.
I'm out of ideas on how to debug this issue. Any help would be much appreciated.
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { optimize: { CommonsChunkPlugin }, ProvidePlugin } = require('webpack')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const project = require('./package.json');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig)
// primary config:
const title = 'Radar';
const outDir = path.resolve(__dirname, 'dist');
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
// If not done this way the plugin will try to load when only a build is required and cause it to hang.
const addDashboardPlugin = process.env.npm_lifecycle_event === 'webpack' ? [] : [new DashboardPlugin({
port: 3333
})];
const metadata = {
port: process.env.WEBPACK_PORT || 9000,
host: process.env.WEBPACK_HOST || 'localhost'
};
const cssRules = [
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: { plugins: () => [require('autoprefixer')({ browsers: ['last 2 versions'] })] }
}
]
module.exports = ({ production, server, extractCss, coverage } = {}) => ({
resolve: {
extensions: ['.js'],
modules: [srcDir, 'node_modules'],
},
entry: {
app: ['aurelia-bootstrapper'],
aurelia: Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-')),
vendor: Object.keys(project.dependencies).filter(dep => !dep.startsWith('aurelia-'))
},
devtool: production ? 'source-map' : 'inline-source-map',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js',
},
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
port: metadata.port,
host: metadata.host,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
module: {
rules: [
{
test: /\.scss$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
},
{
test: /\.scss$/i,
issuer: [{ test: /\.html$/i }],
loaders: ['css-loader?sourceMap', 'sass-loader?sourceMap']
},
// 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 ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules,
}) : ['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: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {},
},
{ test: /\.json$/i, loader: 'json-loader' },
// use Bluebird as the global Promise implementation:
{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
// 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' },
]
},
plugins: [
new AureliaPlugin(),
new ModuleDependenciesPlugin({
'aurelia-dialog': ['./ai-dialog', './ai-dialog-header', './ai-dialog-footer', './ai-dialog-body',
'./attach-focus', './dialog-configuration', './dialog-controller', './dialog-options', './dialog-renderer',
'./dialog-result', './dialog-service', './lifecycle', './renderer'],
'aurelia-chart': ['./elements/chart-element', './attributes/chart-attribute', './observers/model-observer']
}),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: production ? {
removeComments: true,
collapseWhitespace: true
} : undefined,
metadata: {
title, server, baseUrl
},
}),
new CopyWebpackPlugin([
{ from: 'src/config', to: 'config' },
{ from: 'styles/img', to: 'img' }
]),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true,
})),
...when(production, new CommonsChunkPlugin({
name: 'common'
})),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.scss$/i,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
].concat(addDashboardPlugin)
})
package.json
"dependencies": {
"aurelia-animator-css": "^1.0.0",
"aurelia-application-insights": "^1.0.0",
"aurelia-binding": "^1.2.0",
"aurelia-bootstrapper": "^2.1.1",
"aurelia-chart": "^0.2.6",
"aurelia-configuration": "1.0.17",
"aurelia-dependency-injection": "^1.3.1",
"aurelia-dialog": "^1.0.0-beta.3.0.0",
"aurelia-event-aggregator": "^1.0.1",
"aurelia-fetch-client": "^1.1.2",
"aurelia-framework": "^1.1.0",
"aurelia-history": "^1.0.0",
"aurelia-history-browser": "^1.0.0",
"aurelia-logging": "^1.3.1",
"aurelia-logging-console": "^1.0.0",
"aurelia-metadata": "^1.0.3",
"aurelia-notify": "^0.8.1",
"aurelia-pal": "^1.3.0",
"aurelia-pal-browser": "^1.1.0",
"aurelia-path": "^1.0.0",
"aurelia-route-recognizer": "^1.0.0",
"aurelia-router": "^1.3.0",
"aurelia-task-queue": "^1.2.0",
"aurelia-templating": "^1.3.0",
"aurelia-templating-binding": "^1.3.0",
"aurelia-templating-resources": "^1.3.1",
"aurelia-templating-router": "^1.1.0",
"aurelia-validation": "^1.0.0",
"bluebird": "^3.3.5",
"json-loader": "^0.5.4",
... //omitted for clarity
},
"devDependencies": {
"aurelia-loader-nodejs": "^1.0.1",
"aurelia-pal-nodejs": "^1.0.0-beta.1.0.0",
"aurelia-tools": "^1.0.0",
"aurelia-webpack-plugin": "^2.0.0-rc.2",
"autoprefixer": "^7.0.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-istanbul": "^4.1.3",
"babel-plugin-lodash": "^3.2.10",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.16.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.11.6",
"concurrently": "^2.2.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.1.3",
"css-loader": "^0.28.1",
"eslint": "^3.12.2",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.9.0",
"html-server": "^0.1.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"node-sass": "^3.13.0",
"optimize-css-assets-webpack-plugin": "^1.3.2",
"package": "^1.0.1",
"postcss-loader": "^1.3.3",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.6.1",
"webpack-dashboard": "^0.2.0",
"webpack-dev-server": "^2.4.5"
}
nav-bar.html
<template>
<require from='./_nav-bar.scss'></require>
<section class="nav-bar nav-bar__group" data-grid="full">
<div data-grid="full">
<main-menu router.bind="router" data-grid="21"></main-menu>
<user-panel data-grid="3"></user-panel>
</div>
</section>
</template>
main-menu.html
<template class="main-menu">
<ul class="main-menu__nav-list">
<li repeat.for="row of router.navigation">
<a href.bind="row.href"
data-appinsights-category="navigation"
data-appinsights-action="${row.title}"
data-text="${row.title}">
${row.title}
</a>
</li>
</ul>
</template>
main-menu.js
import { bindable, inject } from 'aurelia-framework';
#inject(Element)
export class MainMenuCustomElement {
//This value is always undefined now
#bindable router;
constructor(element) {
this.element = element;
}
toggleMenu() {
//removed for brevity
}
}
I got it to work after adding import babel-polyfill to main.js, changing .babelrc to reference `.babelrc.js like so:
{
"presets": [ "./.babelrc.js" ]
}
I also included .babelrc.js from the skeleton-navigation project.
.babelrc.js
// this file will be used by default by babel#7 once it is released
module.exports = {
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": [
[
"env", {
"targets": process.env.BABEL_TARGET === 'node' ? {
"node": process.env.IN_PROTRACTOR ? '6' : 'current'
} : {
"browsers": [
"last 2 versions",
"not ie <= 11"
],
"uglify": process.env.NODE_ENV === 'production',
},
"loose": true,
"modules": process.env.BABEL_TARGET === 'node' ? 'commonjs' : false,
"useBuiltIns": true
}
]
]
}
How can I get bootstrap working and loaded with webpack for a vue project?
I have been trying to use this: https://www.npmjs.com/package/bootstrap-sass-webpack
I added the loaders to my webpack.config.js and installed bootstrap-sass-webpack. I get the following error when trying to build:
ERROR in ./~/bootstrap-sass-webpack/index.js
Module not found: Error: Cannot resolve module 'sass' in /Users/joebob/Desktop/vue-webpack-starter/node_modules/bootstrap-sass-webpack
# ./~/bootstrap-sass-webpack/index.js 1:0-76
webpack.config.js
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
},
{ test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
package.json
{
"name": "vue-webpack-starter",
"version": "1.0.0",
"dependencies": {
"bootstrap-sass-webpack": "0.0.3",
"vue": "^1.0.16",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"css-loader": "^0.23.0",
"file-loader": "^0.8.5",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.3.0",
"webpack": "^1.12.2"
}
}
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import Home from './home.vue'
import Items from './items.vue'
require("bootstrap-sass-webpack")
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
'/': {
name: 'home',
component: Home
},
'/items': {
name: 'items',
component: Items
}
})
router.start(App, '#app')
Adding sass-loader fixed this error. Am now getting:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!./~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./~/bootstrap-sass-webpack/bootstrap-sass.config.js
Module build failed:
scripts: {
^
Invalid CSS after "#icon-font-path": expected 1 selector or at-rule, was "bootstrap-sass/..."
in /Users/joebob/Development/vue-webpack-starter/node_modules/bootstrap-sass-webpack/bootstrap-sass.config.js (line 2, column 1)
# ./~/bootstrap-sass-webpack/~/style-loader!./~/bootstrap-sass-webpack/~/css-loader!./~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./~/bootstrap-sass-webpack/bootstrap-sass.config.js 4:2-458
This is what I do using webpack-simple template and bootstrap-sass (https://github.com/vuejs-templates/webpack-simple):
package.json
{
"name": "Example",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Aleix Fabra <aleixfabra#gmail.com>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.5.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"node-sass": "^4.5.0",
"sass-loader": "^5.0.1",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
main.js
window.$ = window.jQuery = require('jquery')
import 'bootstrap-sass'
import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(otf|eot|woff|woff2|ttf|svg)$/,
loader: 'file-loader'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
You should install the sass-loader:
npm install sass-loader --save-dev