将scss组件编译为一种css样式时,weback会引发错误

时间:2017-01-23 18:03:50

标签: webpack

我有以下内容:

    $collection = Mage::getResourceModel('customer/customer_collection')
        ->addNameToSelect()
        ->addAttributeToSelect('entity_id')
        ->addAttributeToSelect('email')
        ->addAttributeToSelect('brand')
        ->addAttributeToSelect('group_id')
        ->joinAttribute('shipping_company', 'customer_address/company', 'default_shipping', null, 'left')
        ->joinAttribute('billing_postcode', 'customer_address/postcode', 'default_billing', null, 'left')
        ->joinAttribute('billing_city', 'customer_address/city', 'default_billing', null, 'left')
        ->joinAttribute('shipping_telephone', 'customer_address/telephone', 'default_shipping', null, 'left')
        ->joinAttribute('billing_region', 'customer_address/region', 'default_billing', null, 'left')
        ->joinAttribute('shipping_country_id', 'customer_address/country_id', 'default_shipping', null, 'left')
        ->joinAttribute('billing_vat_id', 'customer_address/vat_id', 'default_billing', null, 'left');

    $collection->getSelect()->joinLeft(
        array('salesrep' => 'custom_column' ), 'main_table.entity_id=salesrep.user_id',
        array('user_id' => 'salesrep.linked_customer_id')
    );

    $this->setCollection($collection);

和index.jsx

var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

var BUILD_DIR = path.resolve(__dirname, 'public/js/');
var APP_DIR = path.resolve(__dirname, 'jsx');

var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'app.js'
    },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel'
            },
            {
                test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader") },

            {
              test: /\.(eot|woff|woff2|ttf|svg|png)$/,
              loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
            }
            // { test: /\.css$/, loader: ExtractTextPlugin.extract({
            //     fallbackLoader: "style-loader",
            //     loader: "css-loader"
            // }) }
        ]
    },
    plugins: [
        new ExtractTextPlugin("style.css", {allChunks: false})
    ]

};

module.exports = config;

当我运行“NPM RUN DEV”时

我得到以下错误:

import React from 'react';
import ReactDOM from 'react-dom'
import {render} from 'react-dom';

import axios from 'axios';

import Forms from './forms/forms.jsx';

import './../public/sass/typography.scss';
import './../public/sass/main.scss';
import './../public/sass/navigation.scss';
import './../public/sass/buttons.scss';
import './../public/sass/forms.scss';
import './../public/sass/icons.scss';
import './../public/sass/layout.scss';

class Header extends React.Component {
    render () {
        return (
            <header>
                <div className="inner">
                    <img src="/img/logo.png" />
                </div>
            </header>
        );
    }
}

....

1 个答案:

答案 0 :(得分:1)

运行

.

你应该没事。你在这里使用它:

npm install autoprefixer-loader

请注意,已弃用:autoprefixer-loader on npm