Как импортировать open-sass.scss с помощью precss postcss?

Question

В настоящее время использование webpack и загрузка открытых sans не работает. все ли должно быть .css-файл для работы?

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 конфигурации

'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

К сожалению, это immpossible, потому что это слишком сложно, чтобы получить от PostCSS плагин все WebPack погрузчики и применить их к содержимому.

Используйте разные способы зависимости от стилей. Я настоятельно рекомендую вам использовать компонентный способ (это базовый вариант для BEM и React). Разделите свой дизайн на небольшие компоненты (например, логотип, нижний колонтитул). Затем создайте каталог для каждого компонента и поместите SCSS и JS компонента в каждый каталог. Затем импортируйте SCSS из JS.

В результате вы будете объявлять зависимости компонентов, требуя одного компонента в другом. Стили компонентов будут загружаться компонентом JS. Таким образом, вы сможете бесплатно загрузить SCSS из SCSS.