some styles lost after package use 'npm run build'

ls-cd commented 7 years ago

I have wrote a component like below:

<template>
 <!-- skip html code-->
</tempate>

<script>
// skip javascript code
</script>

<style scoped>
/*  skip some selectors */
.navbar_right span i{
    font-style: normal;
    -webkit-transform: translateY(-24px);
    -ms-transform: translate(-3px, -27px) !important;
    transform: translateY(-24px);
    display: block;
}
/*  skip some selectors */
</style>

There is a class selector which named 'navbar_right span i', I must use '-webkit-transform' to compatible with IE9 in the selector. With surprise, after package my project use command 'npm run build', I find the style '-ms-transform' was lost. U can find the packaged javascript snippet like below:

webpackJsonp([4]/*skip come code*/.navbar_right span i[data-v-fd3c61d2]{font-style:normal;-webkit-transform:translateY(-24px);transform:translateY(-24px);display:block}/*skip some code*/

U can compare the snippet with the original class selector '.navbar_right span i'.The style '-ms-transform' was lost.I want to know how to solve this bug, is there some solutions? I will list my 'package.json' below, the webpack version is 2.6.1 :

{
  "name": "my-client-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "inoubliab",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
    "echarts": "^3.6.2",
    "vue": "^2.3.3",
    "vue-awesome": "^2.3.1",
    "vue-bootstrap-paginator": "^1.0.0",
    "vue-router": "^2.3.1",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "axios": "^0.16.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "bootstrap": "^3.3.7",
    "bootstrap-fileinput": "^4.4.1",
    "bootstrap-table": "^1.11.2",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
    "chromedriver": "^2.27.2",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^4.0.0",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "jquery": "^3.2.1",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.30",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "vuejs-paginator": "^2.0.1",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

posva commented 7 years ago

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.

"browserslist": [
    "> 1%",
    "last 2 versions",
    "ie >= 9"
  ]

ls-cd commented 7 years ago

@posva Hi,prosva！I'm sure this issue is a bug.Follow each step below can reappear this bug.

use command vue init webpack test-bug create a new project
use command npm install to install dependencies

add a class selector in the App.vue

.test_bug {
-webkit-transform: translateY(-24px);
-ms-transform: translate(-3px, -27px) !important;
transform: translateY(-24px);
}

use command npm run build to package project.If finish, find the generated css file under the path 'dist/static/css',U can see it below:

#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}.test_bug{-webkit-transform:translateY(-24px);transform:translateY(-24px)}h1[data-v-355d633c],h2[data-v-355d633c]{font-weight:400}ul[data-v-355d633c]{list-style-type:none;padding:0}li[data-v-355d633c]{display:inline-block;margin:0 10px}a[data-v-355d633c]{color:#42b983}

Style "-ms-transform" disappeared in the css file which generated by command npm run build.I will list the compressed css snippet below.

.test_bug{-webkit-transform:translateY(-24px);transform:translateY(-24px)}

I have tested this scene several times just now，this bug reappear every time. The webpack version is ^2.6.1.

kerwin-ly commented 6 years ago

I have the same problem(vue:v2.5.2,webpack:v3.6.0),have you resolved it? @ls-cd

ls-cd commented 6 years ago

I have no idea to resolve it, but I think u can set the style manually in your code if the browser is IE @kerwin1

vuejs / vue-cli

some styles lost after package use 'npm run build' #549