Question

我正在将Yarn和Laravel Mix与Webpack一起使用，以将我的SASS文件编译为CSS，还可以编译我的JavaScript文件。一切都很好，但是如何使每个.scss文件在同一文件夹中拥有自己的.css？

例如：

assets/styles/components/component1.scss
assets/styles/components/component1.css

-和-

assets/styles/layouts/homepage.scss
assets/styles/layouts/homepage.css

到目前为止，我的webpack.mix.js文件看起来像这样：

const mix = require('laravel-mix');
const webpack = require('webpack');

mix.setPublicPath(path.resolve('./'))
   .webpackConfig({
     plugins: [
       new webpack.ProvidePlugin({
         Popper: ['popper.js', 'default'],
         $: "jquery",
         jQuery: "jquery"
       })
     ]
   })
   .copyDirectory('assets/images', 'dist/images')
   .copyDirectory('assets/fonts', 'dist/fonts')
   .sass('assets/styles/app.scss', 'dist/css', { outputStyle: 'compressed' })
   .version()
   .options({
     processCssUrls: false,
     uglify: {
       uglifyOptions: {
         output: {
           max_line_len: false,
           beautify: false
         }
       }
     }
   });

if( process.env.NODE_ENV ) {
  require(`${__dirname}/webpack.mix.${process.env.NODE_ENV}.js`);
}

我正在使用：

纱线1.12.3
NNode.js v10.14.1
NPM 6.4.1
Laravel Mix 3.0.0

Answer 1

对多个文件使用Multiple .sass（）并更改目录。

.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/other.scss', 'public/other/css')
.sass('resources/sass/yetanother.scss','public/other2/css');

Laravel将SCSS混合到自己的CSS文件中

1 个答案: