[Vuejs]-How to load scss in vue.js

by

0👍

Unless you configure webpack for SASS compiling its natural that it wont work. If your are using an IDE such as Webstorm it compiles beautifully and shows it in the project folder. In my case i just point it to css file.

In your case try to update your config file as:

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

0👍

This might be a bit… basic, but check here

      </form>
    </template>
    <script>
--->    
    <style lang="scss" type="text/scss">

If that <script> tag isn’t closed, your styles get ignored. This should fill your console with large, red, yelling messages, but I guess not always?

Leave a comment