webpacker: Webpacker SASS/SCSS loader conflicts with libs that use dart sass like vuetify
How do I remove the default sass/scss-loader if it exists ? it conflicts with my own config . see : https://github.com/vuejs/vue-loader/issues/1580
Can I use .delete(key)
?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 27 (7 by maintainers)
@davidfabreguette :
sass
, thevuetify
and thevuetify-loader
packages.Then, in environment.js , something like :
This should be enough to make Vuetify work ( a - la - carte setup ) . by the way “main.scss” should include only variable definitions and overrides for Vuetify. For other global styles use app.scss or some other wrapper component.
The solution described in this article worked for me to replace node-sass with dart-sass:
@jakeniemiec My issue was solved by deleting the loader for ‘css’. That’s all. I don’t understand why webpacker includes a plain css loader but for vue applications using vue-style-loader (new version 15+) a plain css loader conflicts with the sass loader.
Seems that I can remove them with
especially ‘css’ was causing the compilation issue.
I added the required dependencies from vuetify guide (https://vuetifyjs.com/en/customization/a-la-carte). yarn add sass sass-loader fibers deepmerge -D
setup vuetify-loader at environment.js using this:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') environment.plugins.prepend('VuetifyLoaderPlugin', new VuetifyLoaderPlugin())
environment.loaders.delete(‘sass’) environment.loaders.delete(‘moduleSass’) environment.loaders.delete(‘moduleCss’) environment.loaders.delete(‘css’)
environment.loaders.append(‘scss’, { test: /.scss$/, use: [ ‘vue-style-loader’, { loader: ‘css-loader’, options: { sourceMap: true } }, { loader: ‘sass-loader’, options: { sourceMap: true, // data:
@import "app/javascript/src/styles/main.scss";
} } ] })environment.loaders.append(‘sass’, { test: /.sass$/, use: [ ‘vue-style-loader’, { loader: ‘css-loader’, options: { sourceMap: true } }, { loader: ‘sass-loader’, options: { indentedSyntax: true } } ] })
i didn’t included stylesheet_pack_tag in my layout. but even when I add it run to the same problem.
Is it possible to drop webpacker completely with a rails app?