How do I import open-sass.scss using precss postcss?

Question

currently using webpack and loading open sans isn't working. does everything need to be a .css file to work?

ERROR in ./~/css-loader!./~/postcss-loader!./src/containers/LoginLayout/styles.scss
Module build failed: Error: ENOENT: no such file or directory, open '/Users/mikejames/projects/app/node_modules/open-sans-fontface/sass/_variables.css'
    at Error (native)
 @ ./src/containers/LoginLayout/styles.scss 4:14-132

webpack config

'use strict';

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const precss = require('precss');

const DEV = process.env.NODE_ENV !== 'production';

const config = {
  entry: ['./src/index.js'],
  debug: DEV,
  devtool: DEV ? 'source-map' : 'source-map',
  target: 'web',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loaders: ['babel']
    }, {
      test: /\.jpe?g$|\.gif$|\.png$|\.ico$/,
      loader: 'url-loader?name=[path][name].[ext]&context=./src'
    }, {
      test: /\.html/,
      loader: 'file?name=[name].[ext]'
    }, {
      test: /\.scss$/,
      loaders: [
        // 'style?singleton',
        // 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        // 'postcss-loader'
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    },
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?mimetype=application/vnd.ms-fontobject'},
    {test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
    {test: /.svg(\?v=\d+\.\d+\.\d+)?$|.svg$/, loader: 'url?name=[path][name].[ext]&context=./src&mimetype=image/svg+xml'}
    ]
  },
  plugins: [
    // Output our index.html and inject the script tag
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body'
    }),
    // Without this, Webpack would output styles inside JS - we prefer a separate CSS file
    new ExtractTextPlugin('styles.css'),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  postcss: () => {
    return [ autoprefixer({ browsers: ['last 2 versions'] }), precss];
  }
};

if (DEV) {

  config.entry.push('webpack-hot-middleware/client');

  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  );
} else {
  // Minify JS for production
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true,
        unused: true,
        dead_code: true
      }
    }),
    new ExtractTextPlugin('[name].css', { allChunks: true })
  );
}

module.exports = config;

Answer 1

Sorry, it is immpossible, because it is too tricky to get from PostCSS plugin all webpack loaders and apply them to content.

Use different way to styles dependencies. I strongly suggest you to use component way (it is a basemant for BEM and React). Split your design to small components (like Logo, Footer). Then create a directory for each component and put component’s SCSS and JS to each directory. Then import SCSS from JS.

As result you will declare components dependencies by requiring one component in other. Component styles will be loaded by component JS. So you will be free from loading SCSS from SCSS.