danijelh / aspnetcore-vue-typescript-template

Template AspNetCore with Vue, Vue router, Vuex, TypeScript, Bulma, Sass and Jest
MIT License
226 stars 28 forks source link

Vue loader does not include simple css styles #12

Open perminov-aleksandr opened 5 years ago

perminov-aleksandr commented 5 years ago

Let's say we have initial webpack.config.js where options of vue-loader specified as:

{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        preserveWhitespace: false,
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader", // <style lang="scss">
            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax" // <style lang="sass">
        }
    }
}

and in VueApp/idontneedtypescript/App.vue styles specified without lang="scss":

<style scoped>
    .custom-class {
        background: red;
    }
</style>

Then vue-loader does not include simple css styles in extracted css file in wwwroot/dist/css/main.css.

danijelh commented 5 years ago

Hello,

I can confirm that this is indeed an issue. Styles added in the <style scoped> block are not included correctly and therefore do not work.

CURRENT WORKAROUND: Put your style in any .css file and simply import it, it will work as intended.

I will update the webpack configuration in the coming days.

Thank you for reporting this!