webpack：是否可以将 SCSS 编译成 CSS？

Question

const path = require('path');

module.exports = {
  entry: './src/scss/screen.scss',

  output: {
    filename: 'screen.css',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
        {
          test: /\.scss$/,
          use: [
          'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
      {
        test: /\.jpg$/,
        use: [
          'file-loader',
        ],
      },
    ]
  }
};

这是我的webpack.config.js。当我尝试将 SCSS 编译成 CSS 时，它会创建screen.css文件而没有任何抱怨，但其中screen.css包含 javascript 代码（我猜来自其中一个加载程序）。

当项目实际上没有任何 javascript 文件时，甚至可以使用 webpack 吗？我只有 SCSS 文件和图像。

Answer 1

您应该通过 [ExtractTextPlugin][1] 构建 CSS 文件。

顺便说一句，entry密钥仅用于 js 文件。Webpack 观察imports或requires从入口文件中将它们全部构建在一个文件中（我可能会错过一些东西）

您需要安装extract-text-webpack-plugin并需要它

var ExtractTextPlugin = require('extract-text-webpack-plugin')

然后更新你的加载程序

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

和插件

plugins: [
    new ExtractTextPlugin({
        filename: 'styles.css'
    })
]

但是，webpack 需要一些入口 js 文件。您可以只添加下一个代码，但不要使用这个 JS 文件

entry: './app.js',

output: {
    path: join(__dirname, '/build'),
    filename: 'bundle.js'
}

并阅读有关 [entries][2] [1] 的更多信息：https://github.com/webpack-contrib/extract-text-webpack-plugin [2]：https://webpack.js.org/concepts/entry - 点/