在 VuePress [Webpack 配置] 中编译并查看所有 scss 文件

Question

我正在为 vuepress 项目中的 webpack 配置而苦苦挣扎。我想查看所有 sass 文件，并在进行一些更改后在公共文件夹（docs/.vuepress/public/styles）中生成捆绑的 css 文件。在 vuepress 文档中，我发现了两种配置 webpack 的可能性，第一种是通过 chainWebpack 方法，第二种是通过 config.js 文件中的 configureWebpack。

我当前的 vuepress 文档结构如下所示。

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

我阅读了 webpack 文档，发现了有关有助于创建 boudled css 文件的 extract-text-webpack-plugin 的信息。我当前的 chainWebpack 方法如下所示：

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"
    }),
  ]
}

不幸的是，这个模块根本不起作用，我在控制台中没有错误，因此，我不知道下一步该做什么。

我安装了 sass npm 包来编译所有 sass 文件，它运行良好，sass 命令提示符如下所示：

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

我还在 head 中添加了与公共目录中 index.css 文件相对应的附加链接。

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

Answer 1

首先你必须安装sass-loader:

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

之后，必须在docs/.vuepress/enhanceApp.js中导入CSS文件：

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

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

现在这个 CSS 文件将与其他资产一起构建。