Compile and watch all scss files in VuePress [Webpack config]

Question

I am struggling with webpack configuration in vuepress project. I want to watch all the sass files and after making some changes generate bundled css files in the public folder (docs/.vuepress/public/styles). In vuepress documentation I found 2 possibilities to configure webpack first one is through the chainWebpack method and the second one is through confugureWebpack in config.js file.

My current structure of vuepress docs looks like this.

├── docs
│   ├── .vuepress
│   │    └── public 
│   │         └── styles
│   ├── doc1
│   │    ├── README.md
│   │    └── doc1.scss
│   ├── doc2
│   │    ├── README.md
│   │    └── doc1.scss
│   └── sass
│       └── index.scss
│ 
└── package.json

I read webpack docs and I found information about extract-text-webpack-plugin that helps creating boudled css file. My current chainWebpack method look like this:

chainWebpack: (config, isServer) => {
  module = {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                url: false,
                minimize: true,
                sourceMap: true
              }
            }, 
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }
    ]
  },
  plugins = [
    new ExtractTextPlugin({
      filename: "index.css"
    }),
  ]
}

Unforetantlly this module doesn't work at all, I have no errors in the console and because of that, I have no idea what to do next.

I installed sass npm package to compile all sass files and it works perfectly fine the sass command prompt looks like this:

sass ./docs/scss/index.scss ./docs/.vuepress/public/index.css

I added also additional link in head that corresponds to index.css file in the public catalog.

head: [
  [ "link", { rel: 'stylesheet', href: "/styles/index.css" }],
  [ "link", { rel: 'icon', href: "./favicon.ico" }],
],

Answer 1

First you must to install the sass-loader:

npm install sass --save
npm install sass-loader --save

After, you must to import CSS files in docs/.vuepress/enhanceApp.js:

import '../doc1/doc1.scss';
import '../doc2/doc2.scss';
import '../sass/index.scss';

export default ({ Vue, options, router, siteData }) => {};

Now this CSS files will build with others assets.