[Vuejs]-Sass file from npm package not found when importing in Vue-Application

by

0👍

I had this exact problem, my solution was realizing that I had imported a portion of my configuration from a sub folder and that caused @import to attempt importing the ‘@material/button/mdc-button’ from a non-existent node_modules folder under the subfolder that contained my configuration. In the webpack build error, take a look at what paths it is trying to import from. Your scss loader will print them out when it vomits.

👤qtpeters

0👍

I had a similar issue. From the error, it became clear that Webpack was trying to import the files from the same directory as the .vue file. I solution was to alter the webpack config, to include the node_modules folder. However, how to do that is no immediately clear.

With Vue CLI, you do this from the vue.config.js file to be something like the following:

module.exports = {
  // ... other settings ...
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['node_modules']
              }
            }
          ]
        }
      ]
    }
  }
}
👤freethebees

Leave a comment