aspnetcore-vue-typescript-template icon indicating copy to clipboard operation
aspnetcore-vue-typescript-template copied to clipboard

Vue loader does not include simple css styles

Open perminov-aleksandr opened this issue 6 years ago • 1 comments

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.

perminov-aleksandr avatar Aug 06 '19 13:08 perminov-aleksandr

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!

danijelh avatar Aug 10 '19 10:08 danijelh