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;

score 1 · Accepted Answer · answered Jan 29 '16 at 12:30

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.

answered Jan 29 '16 at 12:30

Andrey Sitnik

971
6
9

thanks for the amazing quick response. so I've been using import styles from 'styles.scss' with css modules and really like how its developing. but in the last couple of hours i've come to realise this problem, thanks for your help it much appreciated. I'm now updating my files to be .css files and opting into how things should be done with post css rather than fighting it. – mike james Jan 29 '16 at 13:09
my build was a bit confusing, sass, postcss, cssmodules and styleloader, now dropping the sass loader and using precss – mike james Jan 29 '16 at 13:10
what is your recommened approach to sharing variables in a component structure? @import '../vars'; ? – mike james Jan 29 '16 at 13:15
or compose? composes red from '../vars'; – mike james Jan 29 '16 at 13:15
so is it possible to inject mixins to all files? kind of like the postcss-simple-vars – mike james Jan 29 '16 at 14:18

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

1 Answers1