currently using webpack , loading open sans isn't working. need .css file 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' @ 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 , inject script tag new htmlwebpackplugin({ template: './src/index.html', inject: 'body' }), // without this, webpack output styles inside js - prefer 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 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;
sorry, immpossible, because tricky postcss plugin webpack loaders , apply them content.
use different way styles dependencies. suggest use component way (it basemant bem , react). split design small components (like logo, footer). create directory each component , put component’s scss , js each directory. import scss js.
as result declare components dependencies requiring 1 component in other. component styles loaded component js. free loading scss scss.
Comments
Post a Comment