Vue component styles aren't compiled in production

BrianLangevin commented 5 years ago

Laravel Mix Version: 4.0.16
Node Version: 10.15.1
NPM Version: 6.9.0
OS: Windows 10

Description:

When building for production (npm run prod), styles in single component Vue templates are not included in the final bundle. When building a development bundle (npm run dev), everything works as expected.

The same issue occurs whether extractVueStyles is enabled or not.

All of my Vue components are written in Typescript, and all of my styles are written in Sass.

webpack.mix.js file:

const mix = require('laravel-mix');
const webpack = require('webpack');
var tailwindcss = require('tailwindcss');

// Frontend CSS
mix.sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind-app.js')],
    })
    .version();

// Backend CSS
mix.postCss('resources/assets/css/admin.css', 'public/css', [tailwindcss('tailwind-nova.js')])
    .version();

mix.ts('resources/assets/ts/app.ts', 'public/js/app.js')
    .version();

package.json dependencies:

    "devDependencies": {
        "@babel/cli": "^7.4.4",
        "@babel/core": "^7.4.5",
        "@babel/polyfill": "^7.4.4",
        "@babel/preset-env": "^7.4.5",
        "@ckeditor/ckeditor5-build-balloon-block": "github:asexualoutreach/ckeditor5-build",
        "@ckeditor/ckeditor5-core": "^12.1.1",
        "@ckeditor/ckeditor5-ui": "^12.1.0",
        "@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
        "@fortawesome/fontawesome-pro": "^5.9.0",
        "@fortawesome/fontawesome-svg-core": "^1.2.19",
        "@fortawesome/free-brands-svg-icons": "^5.9.0",
        "@fortawesome/pro-light-svg-icons": "^5.9.0",
        "@fortawesome/pro-regular-svg-icons": "^5.9.0",
        "@fortawesome/pro-solid-svg-icons": "^5.9.0",
        "@fortawesome/vue-fontawesome": "0.1.1",
        "@johmun/vue-tags-input": "^2.0.1",
        "@types/autosize": "^3.0.6",
        "@types/axios": "^0.14.0",
        "@types/cleave.js": "^1.4.0",
        "@types/googlemaps": "^3.36.2",
        "@types/headroom": "^0.7.31",
        "@types/lodash": "^4.14.133",
        "@types/node": "^8.10.49",
        "@types/stripe-checkout": "^1.0.1",
        "@types/stripe-v3": "^3.1.1",
        "@types/to-markdown": "^3.0.0",
        "@types/zenscroll": "^4.0.0",
        "autosize": "^4.0.2",
        "axios": "^0.15.3",
        "babel-loader": "^8.0.6",
        "babel-preset-env": "^2.0.0-beta.2",
        "bootstrap": "^4.3.1",
        "cleave.js": "^1.5.0",
        "cross-env": "^3.2.3",
        "element-ui": "^2.9.1",
        "exports-loader": "^0.7.0",
        "google-maps-infobox": "^1.1.15",
        "google-maps-utility-library-v3-infobox": "^1.1.14",
        "headroom.js": "^0.9.4",
        "laravel-mix": "^4.0.16",
        "lodash": "^4.17.11",
        "medium-editor": "^5.23.3",
        "moment": "^2.24.0",
        "node-sass": "^4.12.0",
        "sass": "^1.20.3",
        "sass-loader": "^7.1.0",
        "speed-measure-webpack-plugin": "^1.3.1",
        "tailwindcss": "^0.7.4",
        "theme-default-scss": "^0.1.1",
        "to-markdown": "^3.1.1",
        "ts-loader": "^6.0.2",
        "tslint": "^5.17.0",
        "turndown": "^4.0.2",
        "typescript": "^3.5.1",
        "uglify-loader": "^3.0.0",
        "uglifyjs-webpack-plugin": "^2.1.3",
        "vee-validate": "^2.2.9",
        "vue": "^2.6.10",
        "vue-class-component": "^6.3.2",
        "vue-clickaway": "^2.1.0",
        "vue-infinite-scroll": "^2.0.2",
        "vue-loader": "^15.7.0",
        "vue-moment": "^3.2.0",
        "vue-property-decorator": "^6.1.0",
        "vue-style-loader": "^3.1.2",
        "vue-tables-2": "^1.4.70",
        "vue-template-compiler": "^2.6.10",
        "vue2-google-maps": "^0.10.6",
        "webpack": "^4.33.0",
        "webpack-bundle-analyzer": "^3.3.2",
        "webpack-cli": "^3.3.2",
        "webpack-node-modules-list": "^0.4.1",
        "zenscroll": "^4.0.2"
    },

Steps To Reproduce:

run npm run prod

calebsmithdev commented 5 years ago

My components are written in standard JS and having the same issue. This feels like a moderately new issue - my 6 month and older projects are not having an issue like this.

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

jakedowns commented 5 years ago

Any chance we can re-open this issue? I'm experiencing it as well. Did @BrianLangevin or @CalebJTSmith ever find a work around?

I'm using laravel-mix 2.1.14, node v8, npm v5

calebsmithdev commented 5 years ago

@jakedowns if I remember right, I resolved the issue by adding the style tag at the very top of the single file component. Something with the vue-template-compiler had changed - I used to have my styles at the bottom of the component.

jakedowns commented 5 years ago

Thanks for the reply, @CalebJTSmith !

I tried that and unfortunately, that didn't seem to resolve the issue, tho. :/

laravel-mix / laravel-mix