Vuetify 2 sass compile error #2173
Comments
|
Hey, that is a problem similar to the one, i had tonight and got finally fixed now But keep in mind, that this is not a Laravel Mix bug. First, you will need to understand, how Mix works, eg. it will add some predefined rules / webpack configs. So as the error suggests, the How to fix your webpack config:Mix adds rules matching all Mix.listen('configReady', webpackConfig => {
// Exclude vuetify folder from default sass/scss rules
const sassConfig = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.sass$/)
);
const scssConfig = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.scss$/)
);
sassConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
scssConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))Which is, what i did, to also apply some custom PostCSS settings (parent prefixing, to restrict vuetify css, to only be valid inside a specific parent css identifier :) ) Side note: Then you would need to separate rules for I hope this explanation is helpful, as it would have been for me before researching for hours. 👍 |
|
@saibotk have you got any idea how to overwrite Vuetify 2.0 variables with Laravel Mix? https://vuetifyjs.com/en/customization/sass-variables - original documentation is for vue-cli application and I haven't got any luck yet in implementing it in mix configuration :/ |
You could either add the vuetify sass import to your own sass files and then do what you want there (you then also would have to change the vuetify import ( {
loader: "sass-loader",
options: {
data: "@import "~@/sass/main.scss"
}
}But since i did not do that yet, i cannot be sure about it, i hope i could still help you out. 👍 |
|
I tried this second approach, but I use scss in my single file components and have some conflicts because of that, but this first idea sounds good, I didn't tried manual import of sass file, thanks :) |
|
@saibotk, your solution worked. Here is the mix configuration: mix.webpackConfig({
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
}
}
]
}
]
},
plugins: [
new VuetifyLoaderPlugin()
],
});
Mix.listen('configReady', webpackConfig => {
// Exclude vuetify folder from default sass/scss rules
const sassConfig = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.sass$/)
);
const scssConfig = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.scss$/)
);
sassConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
scssConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
});
mix.js('app.js', 'dist/js');Thanks. |
|
Glad i could help :) @Manrix |
|
Thanks for sharing. I've been struggling with this for the past few days. My apologies upfront for asking, but would it possible to post a basic repo with a working example of Laravel 5.8 using Vuetify with Sass variable customizations? Once complete, I'm hoping to document the process for the Vuetify team in hope of adding a Laravel + Vuetify section to the Vuetify docs. It's pretty complex for those without deep webpack knowledge, but it's such a powerful combination if we can get it working. Thank you again for your time. |
|
I thought about writing a small Mix addon, to do all the steps and be configurable, but this could take some time. Because i don't like these example repos, since they are mostly outdated too soon and usually requires time to extract only the small information, one really needs. |
|
I agree that the repos get outdated quick, especially all the 1.x templates out there. But I do think a 2.x repo right now would be a useful scaffold for many of us that just a need a starting point. I'm hoping it's not a major effort, since I already feel bad asking. If there is anything I can do assist, let me know. I was hoping to document the process, but it was much more complicated than I anticipated and I haven't been able to get a stable example running. Thanks again for your direction thus far. |
|
@Manrix Hi, can you give step by step to install vuetify in laravel? I kind of stuck here |
|
@xitox97 where are you stuck ? I use the configuration posted above with laravel-mix. |
@Manrix , Here my steps:
and I got this error |
|
You've to install fibers. |
@pawel-marciniak did you manage to overwrite the vuetify variables ? |
|
@Eight-Ball no, I didn't found any good solution yet :/ |
|
I've been stuck for days... |
|
I've found the solution that works in my case: Mix.listen("configReady", config => {
const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString())
const scssOptions = scssRule.loaders.find(l => l.loader === "sass-loader").options
scssOptions.implementation = sass
scssOptions.data = "@import \"./resources/sass/setup/_variables.scss\";"
const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString())
const sassOptions = sassRule.loaders.find(l => l.loader === "sass-loader").options
sassOptions.implementation = sass
sassOptions.data = "@import \"./resources/sass/setup/_variables.scss\""
}) |
|
Check this repo by one of the Vuetify devs: https://github.com/nekosaur/laravel-vuetify. It uses Laravel Mix and Vuetify 2. |
|
Thanks. But i need to override vuetify variables. I've found the solution 2 min ago ! |
It haven't worked for me because of fiber installation that is missing binaries. I'm using: |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
@Nothing-Works Thank you. This looks great! Does it support the vuetify-loader treeshaking features that reduce the size of the production bundle by removing the unused components? |
hello, components loads ok but seems that css are not correctly loaded, for instance button components are produced but shown without any style, as simple html buttons without style does I have to configure css loading apart? |
@Eight-Ball I've been using this for a while. It works well. But I just noticed that it adds the custom variables to each style tag Vuetify injects into the Here's my Mix webpack config: |
|
@hackerESQ I had a similar issue, however in the Vuetify documentation they mention that you should only use variables in your variable file. Variables themselves, e.g. Won't actually get injected into the DOM. They're just used during the webpack compiling of styles. However, using CSS variables such as: WILL get injected and repeated a bunch of times in the DOM. |
Thank you very much. This fixed my issue🙏 |
Laravel Mix 6 is a little different so I changed this snippet to work on that one as well: // Add vuetify variables overrides // sass sassRule.oneOf.forEach(o => { |
|
After many issues, I solve this on Laravel 8. |
|
I had to update @filipembcruz 's solution to the following code: The loader property contains a full path now, so we changed this to check if it contains the sass-loader substring. Why did I pick this solution instead of declaring the rules directly in the webpack config? because the rules are executed twice (1x from vuetify loader plugin, 1x manually added in webpack.config.js). Altering the rules generated by the vuetify loader plugin with Mix.listen() was the only solution that worked for me. |
and others
Description:
When i try to compile vuetify 2 i get this error:
Steps To Reproduce:
Create a simple vuetify app:
and try to compile it.
I asked on laracasts too, https://laracasts.com/discuss/channels/elixir/vuetify-sass-compile-error-with-laravel-mix.
The text was updated successfully, but these errors were encountered: