Laravel Mix SCSS в свой собственный файл CSS - PullRequest
Новая
       39

Laravel Mix SCSS в свой собственный файл CSS

0 голосов
/ 04 декабря 2018

Я использую 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

1 Ответ

0 голосов
/ 12 декабря 2018

Используйте 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');
...