My goal is to get the following code working in .vue files in Laravel project:
<style scoped lang="scss">
#import 'variables'; // <-- file not found
// ...
</style>
Currently, whenever I try to run the above code, the "file not found" error is thrown by the sass compiler.
My current webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
tools: 'resources/assets/sass/tools' // <-- does not work
}
}
});
So the question is, how do I configure laravel-mix, so that I am able to include global sass files without having to use relative paths?
this worked for me :
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
resolve: {
alias: {
'blah': resolve('resources/assets/sass/blah')
}
}
#import '~blah/blah'
If you want a global variable, do not use scoped in the <style> tag
Related
I'm trying to migrate from the now dead Tachyons framework to Tailwindcss. However, there's one block I haven't figured out how to overcome.
I use the jekyll-postscss Gem to enable postscss processing during jekyll build. Things appear to work well with the following setup:
assets/css/styles.css:
---
---
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
postcss.config.js:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
...(process.env.JEKYLL_ENV == "production"
? [require('cssnano')({ preset: 'default' })]
: [])
]
};
tailwind.config.js:
module.exports = {
purge: [
'./_includes/**/*.html',
'./_layouts/**/*.html',
'./_posts/*.md',
'./*.html',
],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [
require('#tailwindcss/typography'),
],
}
With a jekyll build command, I can see the correctly generated styles.css file under _site/assets/css.
However, it doesn't work when I try to import other css or scss files. For example, if I modify the styles.css file into the following
assets/css/styles.scss:
---
---
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "test.css"
where test.css is in the same directory as styles.scss (assets/css/), postcss-import throws an exception
Error: Failed to find './test.css'
in [
/project
]
at /project/node_modules/postcss-import/lib/resolve-id.js:35:13
at async LazyResult.runAsync (/project/node_modules/postcss/lib/lazy-result.js:396:11)
I'm a bit confused as to why postcss-import does not see this file.
Because the css resource you imported is not in the resolved path, the default resolved path includes: root directory, node_modules, etc. Other paths can refer to the official documentation link.
You can try the following methods to solve this problem:
Modify the postcss configuration file postcss.config.js
module.exports = {
...
require('postcss-import')({
addModulesDirectories: ["assets/css"]
}),
...
};
Modify the main style file assets/css/styles.css
#import "assets/css/test.css"
I used a similar solution to what Donnie suggests, but I set the path instead of the addModulesDirectories, which resolved the issue for me. I didn't try the addModulesDirectories, so I don't know whether that might have also worked.
module.exports = {
...
require('postcss-import')({
path: ["assets/css"]
}),
...
};
I am using tailwind with laravel mix and postcss. I get the error:
#apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-grey-default exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
I thought that is because is not in the same CSS file but I am using postcss-import to overcome this. The tag body doesn't have any pseudo-selector, and all the imports are at the top of the file. I really can't understand where this problem comes from and how to solve it.
app.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "variables";
#import url("https://fonts.googleapis.com/css?family=Nunito");
#import "#fortawesome/fontawesome-free/css/all.min.css";
body {
#apply text-grey-default;
}
webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss("./tailwind.config.js"),
]
})
.version();
tailwind.config.js
let colors = {
"grey-default": "#636b6f",
};
module.exports = {
colors: colors,
textColors: colors,
options: {
prefix: "",
important: false,
separator: ":"
}
};
I have understood my mistake. I forgot to put colors and text Colors in theme:{} in my tailwind config.
I am using vuejs in Laravel 5.7 to build an SPA. I am using mocha-webpack and vue-test-utils to write some vue component tests.
The tests can't seem to work out stylesheet imports into components. For example: I have a ExampleComponent.vue which includes the following:
</script>
<style lang="scss" scoped>
#import '#/_variables.scss';
.subpanel-control > ul > li {
background-color: lighten($body-bg, 50);
margin-left: 10px;
height: 25px;
width: 25px;
line-height: 25px;
color: $body-bg;
}
when running npm run test I get the following error:
Error in ./resources/assets/js/components/Panel.vue?vue&type=style&index=0&id=21f01f46&lang=scss&scoped=true&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
#import '#/variables';
^
Can't find stylesheet to import.
╷
98 │ #import '#/variables';
│ ^^^^^^^^^^^^^
╵
stdin 98:9 root stylesheet
in C:\Users\jjackson\Documents\projects\wave\resources\assets\js\components\Panel.vue (line 98, column 9)
I can't work out why it doesn't understand the alias #. Here is my webpack.mix.js:
let mix = require('laravel-mix');
const path = require('path');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/nifty.scss', 'public/css', {
implementation: require('node-sass')
})
.sass('resources/assets/sass/themes/type-b/theme-ocean.scss', 'public/css')
.less('resources/assets/less/bootstrap-4-utilities.less', 'public/css')
.webpackConfig({
resolve: {
alias: {
'#': path.resolve('resources/assets/sass'),
'~': path.resolve('resources/assets/js')
}
}
})
.sourceMaps();
if (mix.inProduction()) {
mix.version();
}
Any help would be appreciated
While struggling with the same issue I landed on this page - https://github.com/vuejs/vue-cli/issues/4053 and a comment from robbishop that lead me to my solution.
Using the above I managed to find a configuration in webpack.mix.js that seem to work:
First install null-loader (npm i -D null-loader)
Add the following line in rules:
{ test: /\.scss$/, use: [{ loader: 'null-loader' }] }
My webpack.mix.js looks like that:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
module: {
rules: [
{ test: /\.scss$/, use: [{ loader: 'null-loader' }] }
]
},
resolve: {
alias: {
'#': path.resolve('somepath/sass')
}
}
})
.sass('some/path/app.scss', 'some/path/css');
My unit tests are now executed while having scss imports in my components.
This turned out to be a docker problem. Was trying to run npm run dev outside of the docker environment, and it was causing this error. When I ran all npm commands inside of the container everything worked fine
I'm using Laravel 5.6 and I would like to add the vtk.js dependency.
I'm using the basic configuration of webpack included by laravel-mix. I'm creating my default app.js and don't want to change this behaviour. So vtk should be included in the app.js.
I also saw that we can add a custom webpack config like this
mix.webpackConfig({
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
]
}
});
But I realy don't know how to include the module.exports and module from the webpack of js in the mix of laravel...
You have to append the path your js file in your webpack
run npm dev
const path = require('path');
const webpack = require('webpack');
const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
mix.webpackConfig({
module: {
rules: [...vtkRules]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
]
}
});
I'm not used to VTK, you have to import/configure everything else on your app.js, which is your entrypoint.
I am trying to load Bootstrap Vue into a Laravel 5.6 project
The official docs say to modify your webpack.config.js file like:
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');
This give me an error
mix.combine() requires a full output file path as the second argument.
and I'm not convinced it's the right way to do it.
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:
// app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~bootstrap-vue/dist/bootstrap-vue.css";
// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
Laravel Mix already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.