Question

我正在使用webpack 3作为我的角度应用。编译我的scss文件时遇到一些问题。这是完整的webpack配置文件：

const path = require('path')
const autoprefixer = require('autoprefixer')
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const config = {
  context: __dirname + '/src',
  entry: {
    app: './index.js',
    vendor: [
      'angular',
      'angular-animate',
      'angular-bootstrap',
      'angular-route',
      'animate',
      'bootstrap',
      'bootstrap-filestyle',
      'jquery',
      'ng-file-upload',
      'ng-parallax'
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'app'),
    publicPath: path.join(__dirname, 'app')
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss']
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader',
          'css?minimize!postcss!sass')
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpg|jpeg|gif|png|svg)$/,
        loader: 'file?name=images/[name].[ext]'
      }
    ],
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.svg$/,
        loader: 'url-loader'
      },
      {
        test: /\.php$/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /\.zip$/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader: 'file-loader?name=[path][name].[ext]'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('./bundle.css'),
    new CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js'
    }),
    new UglifyJSPlugin({})
    // new ExtractTextPlugin({
    //   filename: '[name].min.css'
    // })
  ]
}

module.exports = config

运行webpack后我遇到了这个错误：

ERROR in ./assets/sass/main.scss
Module parse failed: /home/git/project/src/public/src/assets/sass/main.scss Unexpected token (1:13)
You may need an appropriate loader to handle this file type.
| $header-color: #ffffff;
| $admin-panel-height: 40px;
| 
 @ ./index.js 3:0-34

我也尝试使用这个加载器：https://github.com/webpack-contrib/sass-loader

在webpack构建之后，没有出现错误，但是在/ app文件夹中也没有创建css文件。

在index.js中输入main.scss文件：

import './assets/sass/main.scss'

任何人都可以给我一个建议，我如何使用webpack 3构建和观看scss文件？

Answer 1

您已经使用了一些假设用于 webpack 1 的加载程序配置。

配置的那一部分：

loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader',
          'css?minimize!postcss!sass')
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpg|jpeg|gif|png|svg)$/,
        loader: 'file?name=images/[name].[ext]'
      }
    ],

当您转到 Webpack 2 （或3）时，会有重大变化。其中一个是module.loaders => module.rules。您需要将该部分转换为新结构。

此外， ExtractTextPlugin 也会更改其配置样式please read it README。

使用webpack为scular编译scss

1 个答案: