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

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');