编译并查看 VuePress [Webpack config] 中的所有 scss 文件

Question

我正在为 vuepress 项目中的 webpack 配置而苦恼。我想查看所有 sass 文件，并在进行一些更改后在 public 文件夹 (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 文档并找到了有关 extract-text-webpack-plugin 的信息，该信息有助于创建绑定的 css 文件。我当前的 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

我还在头部添加了额外的 link，对应于 public 目录中的 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 文件将与其他资产一起构建。

编译并查看 VuePress [Webpack config] 中的所有 scss 文件

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

sass

webpack

vue.js

vuepress