webpack:是否可以将SCSS编译成CSS?

时间:2017-08-19 16:16:46

标签: css webpack sass frontend

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文件和图像。

2 个答案:

答案 0 :(得分:3)

您应该按ExtractTextPlugin构建CSS文件。

顺便说一句,entry键仅用于js文件。 Webpack从条目文件中观察importsrequires并将它们全部构建在一个文件中(我可能会遗漏某些内容)

您需要安装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

答案 1 :(得分:0)

webpack.config文件的问题在于您为其提供了scss个文件作为切入点。

Webpack假设要捆绑js文件,因此你需要指定一些js文件,在那里你可以导入一个scss文件。