0

我已经阅读了大量的教程并查看了比我想记住的更多的 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 中链接到该文件。

谢谢

4

1 回答 1

2

将 SASS 编译成 CSS

您目前正在正确地将 SASS 编译成 CSS

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

在 dist 目录中创建 CSS 文件

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

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

您只需为源文件创建规则。由于您正在编写 SASS/SCSS，因此您不需要/\.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

在. autoprefixer_webpack.config.js

const autoprefixer = require('autoprefixer');

最后，在和postcss-loader之间添加到加载器链。css-loadersass-loader

use: [
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer()]
    }
  },
  'sass-loader'
]
于 2017-12-11T20:12:51.297 回答