Vue.js built css code is ignored by the components

this is my first post here .

I am currently developing a chrome extension with vue thanks to the amazing vue-cli-plugin-browser-extension plugin.

Hopefully, I succeeded in adding sass to the project by installing the node-sass and sass-loader packages and now I am able to use <style lang="scss"> in my .vue components, what is working correctly in development mode (vue-cli-service build --mode development --watch).

But once I want to build my application, vue-cli-service build command will build the javascript files without error but I will not have the css files built from my scss code.

I tried adding the configuration snippet I've found in the vue.js documentation into my vue.config.js file but it's still not working and I am facing the error bellow:

⠏  Building for production...

 ERROR  Failed to compile with 10 errors                                              00:41:57

 error  in ./src/components/Chat.vue?vue&type=style&index=0&lang=scss&

SassError: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
        on line 1 of src/components/Chat.vue
>> @import "@/assets/main.scss";

   -----------------------------^

I have a main.scss file which is plain sass code:

:root {
    --color-primary: #3ba4fe;
    --color-primary-light: #2e88d6;

    --color-blue-dark-1: #2c2d35;
}

Here is my devDependencies:

    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/devtools": "^5.3.4",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.0.5",
    "socket.io-client": "^4.0.0",
    "vue-cli-plugin-browser-extension": "~0.25.2",
    "vue-template-compiler": "^2.6.11"

And my vue.config.js:

...
configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/main.scss";`
      }
    }
  }

Any help would be pleased, thank you!

Edit: Actually, the css files are built when removing the webpack config (above) but the styling is ignored by the Vue components.

Vue.js built css code is ignored by the components

0 Answers