Не удается вывести точки входа динамического SCSS в Webpack - PullRequest
Новая
       10

Не удается вывести точки входа динамического SCSS в Webpack

1 голос
/ 21 июня 2019

Я использую Webpack 4 и пытаюсь заглянуть в папку, найти все файлы scss и динамически создать точку входа для каждого найденного.Когда я смотрю на то, что функция возвращается, кажется, что она возвращает именно то, что мне нужно, но никакие CSS-файлы не выводятся из функции, только один для первой точки входа tri:

Пример, который я использую, взят из https://www.sitepoint.com/community/t/how-to-configure-webpack-to-output-multiple-css-files-from-sass/303659/2

Я не понимаю, что я делаю неправильно.Спасибо за любую помощь, которую вы можете оказать.

Git Hub Repo 

const departmentStyles = pattern => glob
  .sync(pattern)
  .reduce((entries, filename) => {
    const [, name] = filename.match(/([^/]+)\.scss$/)
    return { ...entries, [name]: filename }
  }, {})

console.log('Departments', departmentStyles('./src/scss/tri/departments/*.scss'))

When I log out the return value of department style I recieve:
/*
Departments { art: './src/scss/tri/departments/art.scss',
  business: './src/scss/tri/departments/business.scss',
  health: './src/scss/tri/departments/health.scss',
  law: './src/scss/tri/departments/law.scss',
  supply: './src/scss/tri/departments/supply.scss',
  tech: './src/scss/tri/departments/tech.scss' }
*/


module.exports = {
  entry: {
    tri: './js/tri.js',
    ...departmentStyles('./scss/tri/departments/*.scss'),
  },

  output: {
    path: path.join(__dist, 'tri'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css'
   })
  ]
}

1 Ответ

0 голосов
/ 23 июня 2019

Вы также должны иметь MiniCssExtractPlugin в разделе плагинов, как этот 

 plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].css"
    })
  ]
...