i'm trying to activate sourcemaps for everything on my cli3 project.
so far i have
vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {
sourceMap: true
},
sass: {
sourceMap: true
},
stylus: {
sourceMap: true
},
postcss: {
sourceMap: true
}
}
},
devServer: { port: 8888 },
configureWebpack: {
devtool: 'cheap-module-eval-source-map',
// ...
according to this https://cli.vuejs.org/config/#css-sourcemap, there is no more option except less (which i don't use).
now vue inspect gives me:
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
implementation: {
run_: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
render: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
renderSync: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
info: 'dart-sass\t1.22.9\t(Sass Compiler)\t[Dart]\ndart2js\t2.4.0\t(Dart Compiler)\t[Dart]',
types: {
Boolean: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
Color: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
List: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Map: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Null: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
Number: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
String: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Error: function Error() { [native code] }
}
},
indentedSyntax: true
}
how can I activate sourcemaps for vue component styles? also, configurewebpack.devtool seems to have no effect at all. (or does it only have an effect when paired with loaderOptions?)
thanks :)
Should be:
module.exports = {
css: {sourceMap: true},
To fix all issues with vue css-sourcemaps, see Vue CLI sourcemaps to style part of vue component file
Related
Following is my vuejs code:
export default {
name: 'LineChart',
extends: Line,
props: {
labelFunction: {
type: Function,
required: false,
default: (label) => label,
},
}
computed: {
options() {
return {
scales: {
yAxes: [
{
ticks: {
callback: this.labelFunction,
},
}],
}
}
}
},
}
I want to write the test case for labelFunction. I want to cover it's default value.
How can I do that?
I have been trying to use Dialog box for authentication. The dialog box is opening but not sending back message via messageParent API, however there is not problem when displayInIframe is added to dialog properties. But we cannot use Iframe for authentication.
Here is the function calling dialog,
function openDialog() {
console.log("openDialog");
Office.context.ui.displayDialogAsync("https://localhost:3000/src/auth/auth.html ", { height: 50, width: 50, promptBeforeOpen: false }, dialogCallback);
}
A part of web.config file
module.exports = async(env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: "#babel/polyfill",
taskpane: "./src/taskpane/taskpane.js",
commands: "./src/commands/commands.js",
auth: "./src/auth/auth.js"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
}
}
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "taskpane"]
}),
new CopyWebpackPlugin([{
to: "taskpane.css",
from: "./src/taskpane/taskpane.css"
}]),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["polyfill", "commands"]
}),
new HtmlWebpackPlugin({
filename: "auth.html",
template: "./src/auth/auth.html",
chunks: ["polyfill", "dialog"]
}),
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
},
https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
port: process.env.npm_package_config_dev_server_port || 3000
}
};
Here is the simple auth.js file I am using for debugging,
Office.initialize = function() {
$('#button1').click(one);
};
function one() {
console.log("picked 1");
Office.context.ui.messageParent("Picked 1");
console.log("picked");
// Both the console lines are working in new window but messageParent not returning message
}
I am confused how to change sass-loader settings using vue.config in this documentation there is a webpack.config but my project doesn't have one and I don't think I should have one because according to this documentation I should use vue.config.
The command vue inspect contains the string loader: 'sass-loader', 8 times so I'm not sure what to change.
My source code is the following:
<style lang="scss">
.some-class {
border-bottom: 100px solid $alert;
}
</style>
Then I would like to adjust the values for webpack using vue.config to:
{
loader: 'sass-loader',
options: {
prependData: '$alert: ' + process.env.ALERT_COLOR + ';',
}
}
I suspect I have to change the following entry (coming from vue inspect):
/* config.module.rule('scss').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
implementation: {
run_: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
render: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
renderSync: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
info: 'dart-sass\t1.23.0\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.1\t(Dart Compiler)\t[Dart]',
types: {
Boolean: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
Color: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
List: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Map: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Null: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
Number: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
String: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Error: function Error() { [native code] }
}
}
}
}
]
}
Reading through the docs you linked I would guess it's something like this:
vue.config.js
module.exports = {
chainWebpack: config => {
const cssRule = config.module.rule('css')
// clear all existing loaders.
// if you don't do this, the loader below will be appended to
// existing loaders of the rule.
cssRule.uses.clear()
// add replacement loader(s)
cssRule
.use('sass-loader')
.loader('sass-loader')
.tap(options => {
// modify the options...
return options
})
}
}
And add the sass options you want were is says modify the options.
It's worth noting that cssRule.uses.clear() will clear the previous CSS rules. Which I think you will need to do otherwise you might have conflicting rules. If you find that it is removing a rule you need, I would add it back manually (the same way you are adding sass.
The following seems to work, in my vue.config
const path = require('path');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "Theme/_colors.scss";
`,
},
},
},
configureWebpack: {
resolve: {
alias: {
Theme: path.resolve(
__dirname,
`src/themes/${process.env.THEME || 'light'}/`
),
},
},
},
};
In _colors.css I can just set the variables: $alert:red;
Just learning vue. Install the slider plugin for the site from here: https://github.com/surmon-china/vue-awesome-swiper . Transferred the code and received such an error: 'window is not defined' Code below. I use nuxt.js. There are several solutions on the Internet, but none of them helped me.
slider.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
}
}
</script>
vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,{});
nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'stud-cit',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Stud-cit site' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: 'blue'},
plugins: [
'~/plugins/vuetify',
'~/plugins/vue-awesome-swiper' ,
'~/plugins/vuePose'
],
build: {
vendor :['vue-awesome-swiper/dist/ssr'],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
});
}
}
}
};
This library has special build for SSR.
Reference
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
Trying to add vue (and SFCs) to my webpack app. The <template> and <script> blocks work fine, but for some reason the styles in the <style> block are not being extracted for production build.
In the dev build, it's extracting the .vue <style> block to a separate css file (named for the entrypoint). Which is OK but I'd prefer they went into my main stylesheet.
But no matter what I try, I can't get any .vue styles to show up (in any file) for the production build.
This is an abbreviated version of my webpack config:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
...
module.exports = (env) => {
return {
entry: {
app: ["./src/polyfills.js", "./src/scss/styles.scss", "./src/app.js"],
...
testview: "./src/js/views/TestView.js"
},
output: {
path: assets,
filename: "[name].[hash].js",
publicPath: "/static/"
},
resolve: {
modules: ["node_modules", "src"],
alias: {
vue$: "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue"]
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [
[
"#babel/preset-env",
{
targets: {
browsers: ["> 1%", "last 2 versions", "ie >= 11"]
}
}
]
],
plugins: ["#babel/plugin-proposal-class-properties"],
code: true,
comments: true,
cacheDirectory: true,
babelrc: false
}
}
]
},
{
test: /\.s?[ac]ss$/,
use: [
"vue-style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: ifNotProduction()
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: ifNotProduction(),
plugins: () =>
ifProduction([
require("autoprefixer")({
preset: "default"
}),
require("cssnano"),
require("css-mqpacker")
])
}
},
{
loader: "sass-loader",
options: {
sourceMap: ifNotProduction()
}
}
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2,
minSize: 0
},
styles: {
name: "styles",
test: /\.css$/,
chunks: "all",
enforce: true
}
}
},
occurrenceOrder: true
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "style.[hash].css"
}),
new HtmlWebpackPlugin({
hash: true,
inject: false,
template: "./src/jinja-templates/base.html.j2",
filename: `${templates}/base.html.j2`,
})
]
};
};
The .vue file I'm using is this demo one. I'm trying to import it into the entrypoint called 'testview' which contains simply:
import Vue from "vue";
import MainContent from "../components/main-content";
let MainComponent = Vue.extend(MainContent);
new MainComponent().$mount("#mainContent");
Did figure it out. I had to remove sideEffects: false from my package.json. This issue explains it further.
Still would like to know how to extract the .vue styles to my main stylesheet As it is now, the .vue styles are extracting to a separate stylesheet (dev and production).