Laravel Mix SCSS 到它自己的 CSS 文件

Question

我正在使用Yarn和Laravel Mix与Webpack将我的SASS文件编译为CSS，并编译我的JavaScript文件。一切都很好，但我如何才能让每个.scs文件在同一个文件夹中都有自己的.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');