Webpack 3 - 将样式写入 CSS 文件

Question

我阅读了大量的教程并查看了比我想记住的更多的 Github 存储库，但我真的很难设置 Webpack 3 来执行以下操作：

• 将 SASS 编译成 CSS
• 在 dist 目录中创建 CSS 文件
• 在 CSS 上运行 Autoprefixer

下面是我的 webpack.config.js：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    context: path.resolve(__dirname, 'src'),
        entry: {
        app: './js/index.js',
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist',                          // New
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src'),    // New
    },

    module: {
        rules: [
            {
                test: /\.js$/i,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: { presets: ['env'] },
                }],
            },
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },
            {
              test: /\.(sass|scss)$/i,
              use: [
                'style-loader',
                'css-loader',
                'sass-loader',
              ]
            }
        ]
    },
    plugins: [
      new ExtractTextPlugin({
        filename: 'css/styles.css',
        allChunks: true,
      }),
    ]
};

目前：

• webpack 开发服务器正在运行。
• 样式从 src/scss/styles.scss 复制到由 src/index.html 提供的 HTML 文件中的内联样式块。

我想创建一个 dist 目录，其中包含一个 styles.css 文件，然后我可以从我的 HTML 中链接到该文件。

谢谢

Answer 1

将 SASS 编译成 CSS

您当前正在正确地将 SASS 编译为 CSS

{
  test: /\.(sass|scss)$/i,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

在 dist 目录中创建 CSS 文件

由于前面描述的加载程序链中的style-loader，CSS 没有被提取到外部文件中。 style-loader 在 <style> 中内化所有传递给它的 CSS。

要创建一个您可以使用的外部文件，您就是extract-text-webpack-plugin。唯一的问题是它没有附加到/\.(sass|scss)$/ 测试。

您只需为源文件创建规则。由于您正在编写 SASS/SCSS，因此不需要 /\.css$/ 测试。如果您将加载器链更改为

，则应该提取您的 CSS

{
  test: /\.(sass|scss)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'sass-loader'
    ]
  })
}

在 CSS 上运行 Autoprefixer

现在，要为 CSS 自动添加前缀，您需要在链中添加另一个加载器 postcss-loader。与autoprefixer一起安装。

npm i -D postcss-loader autoprefixer

在webpack.config.js 的顶部添加对autoprefixer 的要求。

const autoprefixer = require('autoprefixer');

最后，将postcss-loader 添加到加载器链中，in between css-loader and sass-loader。

use: [
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer()]
    }
  },
  'sass-loader'
]