Using module in vue.config.js

Question

I am trying to use the following code in my vue.config.js file, but it is giving me errors that module is not allowed. I am aware that there are configureWebpack and chainWebpack options, but I have no idea how to convert the following to use them. Any help would be appreciated

var path = require('path');
module.exports = {
  foo:{},
  bar{},

  // Putting module in here does not work    
  module: { 
        rules: [ 
            { 
                test: /\.vue$/, 
                loader: 'vue-loader', 
                options: { 
                    loaders: { 
                        'scss': [ 
                            'vue-style-loader', 
                            'css-loader', 
                            { 
                                loader: "sass-loader", 
                                options: { 
                                    includePaths: [ 
                                        path.resolve(__dirname, "./node_modules/@syncfusion") 
                                    ] 
                                } 
                            } 
                        ] 
                    } 
                } 
            } 
        ] 
  } 
}

and in my vue file

<style lang="scss">
@import 'subfolder-inside-syncfusion/some-file.scss';
</style>

Link to code I found:

https://www.syncfusion.com/forums/139116/scss-files-when-included-in-my-file-doesnt-work-as-expected

r0skar · Accepted Answer · 2019-01-16 14:25:04Z

1

You dont have to tap into the webpack config, if all you need is to include a global SCSS file. To import @syncfusion from node_modules, you can setup your vue.config.js like so:

css: {
  loaderOptions: {
    sass: {
      data: `@import "~@syncfusion";`
    }
  }
}

For more info, see the Vue docs "Working with CSS".

answered Jan 16, 2019 at 14:25

r0skar

8,75614 gold badges53 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ekjcfn3902039 Over a year ago

Hi, thanks for your response. I edited my post to show the import and link to where I found the code. I still get errors saying 'File to import not found or unreadable'. Is the import shown above still correct?

r0skar Over a year ago

Ok. I thought you were trying to include a scss file, but now I see you were trying to create an alias to the syncfusion path. Did you install the syncfusion pkg? Is it in your node_modules/@syncfusion folder? If so, this import: @import "~@syncfusion/subfolder-inside-syncfusion/some-file.scss"; should work, as long as the imported file actually exists at the given location.

ekjcfn3902039 Over a year ago

Yes, I have the package installed. No the ~ doesn't work. I think it's a bug and the code supplied above (and shown in detail in the link) is the fix for it. I just don't know how to add it to the vue.config.js file

Collectives™ on Stack Overflow

Using module in vue.config.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related