Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Impossible to import scss (vue cli 3)
See original GitHub issueI want to use material-components-web via npm in my Vue CLI 3 project.
Here is some configuration:
App.vue
<style src="./main.scss" lang="scss"></style>
main.scss
@import "~material-components-web/material-components-web";
main.js
import Vue from 'vue'
import * as mdc from 'material-components-web';
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
Vue.config.productionTip = false
Vue.use(mdc)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Error I get:
ERROR Failed to compile with 1 errors
error in ./src/main.scss?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
File to import not found or unreadable: @material/button/mdc-button.
in C:\Users\...\my-project\node_modules\material-components-web\material-components-web.scss (line 23, column 1)
I looked on the internet, including all possible GitHub related issues, stackoverflow for 5 hours now with all trial possible, the solution that got repeated is to add node modules in the includePaths.
I tried that (but in many different ways): vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
includePaths: ["node_modules"]
}
}
}
}
I tried for example:
const path = require('path')
...
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, "node_modules")],
},
}
or:
includePaths: glob.sync('node_modules').map((d) => path.join(root, d))
or:
includePaths: ['node_modules', 'node_modules/@material/*'] .map((d) => path.join(__dirname, d))
or:
loaderOptions: {
sass: {
data: [
'../node-modules/material-components-web/material-components-web.scss'
].map(fileName => fs.readFileSync(fileName, 'utf-8')).join('\n')
}
}
But still the same error. He finds the main scss in node_modules/material-components-web/material-components-web.scss but then he can’t process the first line of it which is
@import "@material/button/mdc-button";
in this case.
Nothing seems working. Anyone would see what am I missing?
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Follow the instractions of how to import the scss files from material.io
And just include the node_modules directory. Thre is a “./” at the bigin.
delete the lines
and lastly import components in your .vue files as in documentation
example Toolbar.vue
@skatAn8rwpas It works! I’m so happy. I’m putting the summary of what is final in case other people need. Project with vue and material design web :
npm install material-components-web@import "~material-components-web/material-components-web";<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">Thanks everybody!