Webpack autoprefix не работает с предлагаемой конфигурацией

Question

Я пытаюсь получить компиляцию sass для работы с webpack с использованием sass-loader и autoprefixer и postcssloader. Компиляция sass работает успешно. Однако последующие вместе с документацией по автоопределению не работают:

Добавить загрузчик PostCSS в webpack.config.js. Поместите его перед загрузчиком css-загрузчиком и загрузчиком стиля. Но после sass-loader, если вы его используете.

Так только с Sass работы, я имел

loaders: [ 
    { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
    } 
], 
sassLoader: { 
    includePaths: [path.resolve(__dirname, "./build")] 
} 

Но чтение выше, похоже, что мне нужно что-то вроде этого.

'loaders': [ 
    { 
     test: /\.scss$/, 
     loaders: ["sass"] 
    },  
    { 
     test: /\.css$/, 
     loaders: [ 
      'style-loader', 
      'css-loader?modules&importLoaders=1', 
      'postcss-loader' 
     ] 
    }, 
    { 
     test: /\.scss$/, 
     loaders: ["style", "css"] 
    } 
], 
sassLoader: { 
    includePaths: [path.resolve(__dirname, "./build")] 
} 

Также в отношении:

Затем создают postcss.config.js:

Я сделал этот файл и поместить его в

module.exports = { 
    plugins: [ 
    require('precss'), 
    require('autoprefixer') 
    ] 
} 

Однако, я получаю следующая погрешность

Invalid CSS после того, как "... загрузить стили": ожидается 1 селектор или властвуй, был "вар содержание = requi" в /path/to/scss/index.scss

и все брейки. Что случилось с этой конфигурацией?

Answer 1

Для моего проекта я организовал загрузчики в следующем порядке, чтобы заставить его работать с файлами scss.

loaders: [ 
    'css-loader?modules&importLoaders=1', 
    'postcss-loader', 
    'sass-loader' 
] 

Answer 2

Я нашел успех с делать что-то вроде этого:

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /node_modules/, 
     loader: "babel-loader", 
     query: { presets: ["es2015", "stage-0", "react", "react-hmre" ]} 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"] 
     } 
    ] 
    }, 
    postcss: function() { 
    return [ 
     require('precss'), 
     require('autoprefixer') 
    ]; 
    } 
};