I have my Bower vendor directory at resources/assets/vendor.
In my gulpfile, I've tried the following:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js");
When I run gulp in terminal, it doesn't seem to do anything. No errors though.
I also tried this:
mix.copy('vendor/jquery/dist/jquery.min.js', 'public/js/jquery.js');
To no avail.
What am I missing?
update & solution
Only sass,less and coffee scripts are by default looked for in resources/assets/[sass/coffee/less] while JS files are simply in resources/js which confused me. Beware.
First of all, we don't know location of your jquery.min.js file. However the default location for scripts files is resources/js so to make it work, you should have your jquery.min.js file in resources/js/vendor/jquery/dist/jquery.min.js.
As 2nd argument you should pass your target filename with path, so it should be for example:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js/jquery.min.js");
assuming as I mentioned at the beginning you have this JS file in resources/js/vendor/jquery/dist/jquery.min.js location
If you don't, you should use 3rd parameter. So in this case, if your JS file is really in "vendor/jquery/dist/jquery.min.js" location, you could use:
mix.scripts([
"jquery.min.js"
], "public/js/jquery.min.js", "vendor/jquery/dist");
to make it work.
EDIT
After explaining in comments, you should use then:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js/jquery.min.js", "resources/assets/js");
Related
I see Laravel is getting rid of Elixir with v8.0, so I'm working through changing all of our apps over to Mix.
I am able to successfully mix my js files into all.js, and the scss files are produced and mixed into the final all.css file. My problem is that it simply will not load some of the css files within the style method. npm run is successful - it outputs all files without error. It just doesn't include some of the css files.
I have tried:
Moving the js mix above css. -- no change
Changing the name of the offending css files -- no change
Reducing the offending css files down to almost nothing, just a few lines -- no change
Copy/paste of the offending css files into a single file -- WORKS
But this is a non-solution; if I change the base files, I would have to copy paste each time.
Also seems to indicate that the problem is not with the css???
Elixir handled this perfectly and did all I need to. What am i missing with Mix??
Webpack.js (trimmed):
mix.scripts(['public/js/sweetalert1.js', 'public/js/base.js', 'public/js/jquery.tablesorter.js',
'public/js/jquery.validate.js'], 'public/output/all.js')
.options({
processCssUrls: false
}).version(); // Success
mix.sass('resources/assets/sass/tablesorterColumns.scss', 'public/css/mixed'); // Success
mix.styles([ 'public/css/mixed/base.css', 'public/jquery.tablesorter.css',
'public/css/swal1.css', 'public/css/bootstrap-dropdown-menu.css'], 'public/output/all.css').version();
// Fails reading two files, but Success on output of the others
Everything works except it simply doesn't touch the two files, bootstrap-dropdown-menu.css and swal1.css
I am running Laravel 5.4 and using Laravel Mix to compile my assets. I have two SASS files for production. However, one of them needs to be compiled from SASS to CSS without minifying. I don't see how to do that. Here's what I have in my webpack.mix.js file:
mix.js(
[
'resources/assets/js/app.js',
],
'public/assets/js'
)
.sass(
'resources/assets/sass/app.scss',
'public/assets/css'
)
.sass(
'resources/assets/sass/pdf.scss',
'public/assets/css',
)
.version();
Now, the pdf.scss file is the one that needs to be "un-minified" for production. Is there any way to do so?
Thanks for answers!
Hi I found a solution to do this.
mix.sass("src/app.scss", "dist/", {
sassOptions: {
outputStyle: 'expanded',
},
})
sassOption help you to add some features to sass file.you can see all option here".
When you set the value of outputStyle equal to expanded, this will prevent the compression of SCSS files from damaging them. Of course, by doing this, the files will be compressed again.
I'm building something using the Electron framework. I'm using Vue and SCSS, and I'd like to use Laravel Mix.
However, I can't figure out how to use Laravel Mix without ES6 compilation using babel. Since Electron is running on Node, there is no need to compile to ES5.
Looking through Laravel Mix's API, there seems to be no method that provides this functionality.
I created a .babelrc file with the following contents:
{
"plugins": [ ],
"presets": [ ]
}
However, after running npm run dev, the output file clearly has been transpiled to ES5.
According to line 248 of src/config.js in Laravel Mix's source code, the options taken from .babelrc overwrite the default options defined on line 220.
Laravel Mix Version: 1.7.2
Is there something I'm missing? Or does Laravel Mix simply not support this functionality?
Thanks in advance.
I had similar problem and it wasn't easy to find, but here's the solution:
mix.babelConfig({
only: ["./some-fake-dir"]
})
As the Babel documentation says:
Use it to explicitly enable Babel compilation of files inside the src
directory while disabling everything else.
So by entering some fake dir, you turn off the compilation all together.
More on this option here: https://babeljs.io/docs/en/options#only
I'm trying to use a theme which I bought from themeforest with Laravel
I have already use mix.copy to move my fonts from node_modules to my public dir, this works fine./
However when I include the following lines in my webpack.mix file,
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
I get the following errors
Any idea what I am doing wrong here?
Never mind seems like this is doing the trick
mix.options({
processCssUrls: false
});
Set to false to take urls as they are
As in Material Component Web's example, I want to be able to import SCSS from my node_modules like this:
#import '#material/elevation/mdc-elevation';
However, I'm getting this error message when trying to run the webpack build:
File to import not found or unreadable: #material/elevation/mdc-elevation.
#import './~/#material/elevation/mdc-elevation.scss'; doesn't work either.
I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.
What did they do in Material Components Web's Vue.js example in order to make it work?
Here's my npm-debug.log in case you need it.
And here's the corresponding Git repository: sk22/spg-tinf-sem03/proj01
Thanks in advance!
Edit: I want to be able to import the scss files, not the compiled css.
Got it.
here's a part of my webpack 2 config's module.rules:
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, 'node_modules')],
},
},
],
},
So what did I do wrong?
My options object was placed in the rule directly, not the loader.
The old webpack config rule looked like this:
{
test: /\.(sass|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},
See the difference? Instead of the 'sass-loader' string, I extended it to an object, containing the loader name and the options object, because the options only apply to the sass-loader.
(You could also drop the path.resolve and only write 'node_modules', but it might be safer to leave it.)
Check out this documentation page for further information. https://webpack.js.org/configuration/module/#rule-use
Without that loader, you must prefix each import with a ~, which webpack converts to the node_modules folder, at least with my previous configuration.
But this will break 3rd party SCSS frameworks like Material Components Web, because they use #import statements without a leading ~ themselves, for example here.
Inside .vue files
This will not work in .vue files, as vue-loader just uses sass-loader without any options by default.
So if you want that to work, you probably need to make use of vue-loader's own options, as described in its documentation.
(I'm unable to get it to work for some reason I don't know...)
EDIT: Webpack has a section on sass-loader now: https://webpack.js.org/loaders/sass-loader/ also mentioning includepaths.
I had the same issue with #material and Vue. I managed to resolve the problem without adjusting the use property directly.
Solution
Step 1: First create a default Vue 2.1 project using the CLI.
Your file structure will have a ./build directory.
Step 2: Open the file 'utils' you will see a cssLoaders() function which returns an object/map for the languages vue-loader supports.
You will see both sass and scss in that map.
Step 3: Change the values of sass and scss to:
sass: generateLoaders('sass', {
indentedSyntax: true,
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
scss: generateLoaders('sass', {
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
Step 4: Go to the .vue file you're using and change the lang attribute in your <style> element to either sass or scss.
Step 5: After you've done that go to the terminal/console and install sass-loader with:
npm install sass-loader node-sass webpack --save-dev
Step 6: Then run npm run dev and it should work.
Why does this work?
Libraries
I dug around a bit and it turns out sass-loader uses node-sass which has some options such asincludePaths one mentioned by #22samuelk. IncludePaths tells node-sass or rather the underlying library LibSass to include sass files from that directory/path.
Vue
Sass-loader options
By default Vue expects your assets to be in your projects src/assets folder (correct me if I'm wrong). You can however use ~ to indicat you want to start at your projects root which would look like `~/node_modules/#material/smth/mdc-smth.scss.
Now if you want your sass-loader to use something other than those options you need to explicitly tell them.
Hence path.resolve(__dirname, '../node_modules' since the utils file is in ./build and you need to use an absolute path for sass-loader to understand where to look.
Vue-loader config
This is not really specific to the question but the vue-loader config defined in vue-loader.conf.js works as follows:
It uses the map returned by cssLoaders() to build the loaders expected by webpack.
The returned map ({key:value}) is then used by providing key as a file extension used in test: for a loader object. The value is used as the loader object.
Which would like like this:
{
test: /\.(key)$/,
use: [
{
loader: '//ld//-loader',
options: {
/*Options passed to generateLoaders('//ld//', options)*/
},
},
],
}
Where key is the file extention. In this case that would be either sass or scss. And //ld//is the loader you which to use. Which is shown in Step 3 as 'sass'.
Hopefully this clears up some stuff. Took me a while because I just started using Vue.