如何为LARAVEL 8重写webpack.config.js和添加SASS

Question

如何为LARAVEL 8重写webpack.config.js和添加SASS

mix.js("resources/js/app.js", "public/js")
        .postCss("resources/css/app.css","public/css",[
            require("postcss-import"), 
            require("tailwindcss"), 
            require("autoprefixer")]
);

Answer 1

来自/node_modules/laravel-mix/setup/webpack.mix.js

// Full API // mix.js(src，输出)；// mix.react(src，输出)；<--与mix.js()相同，但寄存器反应巴别塔编译。// mix.preact(src，输出)；<--与mix.js()相同，但注册预编译。// mix.coffee(src，输出)；<--与mix.js()相同，但注册CoffeeScript编译。// mix.ts(src，输出)；<-- TypeScript支持。要求tsconfig.json与webpack.mix.js // mix.extract(vendorLibs)；// mix.sass(源，输出)；// mix.less(源，输出)；// mix.stylus(源，输出)；// mix.postCss(源，输出，需要(‘postcss-some plugin’)())；// mix.browserSync('my-site.test')；// mix.combine(文件，目标)；// mix.babel(文件，目标)；<--与mix.combine()相同，但也包括Babel编译。// mix.copy(from，to)；// mix.copyDirectory(fromDir，toDir)；// mix.minify(文件)；// mix.sourceMaps()；//启用源地图// mix.version()；//启用版本控制。// mix.disableNotifications()；// mix.setPublicPath('path/ to /public')；// mix.setResourceRoot('prefix/for/resource/locators')；// mix.autoload({})；<--会传给Webpack的ProvidePlugin。// mix.webpackConfig({})；<--覆盖webpack.config.js，不直接编辑文件。// mix.babelConfig({})；<--合并额外的Babel配置(插件等)使用Mix的默认值。// mix.then(function () {}) <--每次Webpack搭建完成都会触发。// mix.when( condition，function (mix) {}) <--条件为真时调用函数。// mix.override(function (webpackConfig) {}) <-- Mix生成完整的webpack配置对象后会触发。// mix.dump()；<--将生成的webpack配置对象转储到控制台。// mix.extend(name，handler) <--用自己的组件扩展Mix的接口// mix.options({ // extractVueStyles: false，//将.vue组件样式提取到文件，而不是内联。// globalVueStyles:文件，//每个组件都要导入的变量文件。// processCssUrls: true，//处理/优化相对样式表url()的。如果不希望它们被触摸，则设置为false。// purifyCss: false，//删除未使用的CSS选择器。// terser：{}，//特定于用户的选项。https://github.com/webpack-contrib/terser-webpack-plugin#options // postCss：[] //后期CSS选项：https://github.com/postcss/postcss/blob/master/docs/plugins.md // })；

如果你想编译SASS，你只需要做以下事情：

mix.js("resources/js/app.js", "public/js")
   .sass("path/to/file.scss", "public/css");

Answer 2

只需添加SASS并定制输出目录即可。

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css",[
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer")]
    )
.sass("resources/sass/app.scss", "public/css/sass");