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.scs复制到从src/index.html提供的HTML文件中的内联样式块。

我希望使用styles.css文件创建一个DIST目录，然后我可以从HTML内部链接到。

谢谢

Answer 1

将sass编译成CSS

您目前正在正确地将Sass纳入CSS中的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$/测试。如果将加载程序链更改为

，则应提取您的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添加到加载程序链中，在css-loader和sass-loader 之间。

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