Webpack只生成JS，没有来自SCSS的CSS文件

在我的项目中，我使用带有React和NodeJS的Webpack。我想生成一个bundle.js和style.css文件。目前，我有下面的代码：Webpack只生成JS，没有来自SCSS的CSS文件

var webpack = require('webpack') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 

module.exports = { 
    entry: './index.js', 

    output: { 
    path: 'public', 
    filename: 'bundle.js', 
    publicPath: '' 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     }, 
     { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') } 
    ] 
    }, 

    plugins: [ 
    new ExtractTextPlugin('public/style.css') 
    ] 
}

但是当我运行webpack只有JS文件在./public地图创建：

Asset Size Chunks    Chunk Names 
bundle.js 844 kB  0 [emitted] main 
    + 222 hidden modules

下面的例子/教程它只是面向于CSS文件或明显的错误，就像不执行ExtractText一样。我也下载了包sass-loader node-sass。在一些例子中，我确实发现了那些包含的软件包，有些则没有。

EDIT（需要index.js风格）：

import React from 'react' 
import { render } from 'react-dom' 
import { Router, browserHistory } from 'react-router' 

import routes from './modules/routes' 

require('./public/style.css') 

render(
    <Router routes={routes} history={browserHistory} />, 
    document.getElementById('app') 
)

EDIT（webpack.config.js）：

module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     }, 
     { 
     test  : /\.scss$/, 
     include : path.join(__dirname, './public/sass'), 
     loaders : ["style", "css", "sass"] 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('css!sass') 
     } 
    ] 
    }, 

    sassLoader: { 
    includePaths: [path.join(__dirname, './public/sass')] 
    }, 

    plugins: [ 
    new ExtractTextPlugin(path.join(__dirname, './public/style.css')) 
    ]

我的文件夹结构如下所示：

webpack.config.js 
index.js 

/public 
    index.html 
    bundle.js (generated) 

    /sass 
     style.scss 
     basics.scss (imported in style.scss)

来源

2016-03-14 ronnyrr

确保您需要你的风格文件。例如

require('../sass/app.scss');

我想你需要风格加载器以及例如，

{ 
     test  : /\.scss$/, 
     include : path.join(__dirname, 'sass'), 
     loaders : ["style", "css", "sass"] 
}

这三个装载机执行以下操作

把你scss文件转换成普通CSS与SASS装载机
解决所有imports和url(...)s在CSS与CSS的帮助装载机
将这些样式插入样式加载器

来源

2016-03-14 22:17:09 WitVault

感谢您的回复。我没有将加载器添加到我的代码中（在提取加载器之上），并在我的条目index.js中请求了css文件（请参阅我的编辑代码）。我也做了再次添加sassLoader ..虽然它仍然无法正常工作。当我运行webpack时，出现以下错误：'索引错误。未找到js模块：错误：无法解析'file'或'directory'。/ public/style.css'。我没有看到我做错了什么？！ – ronnyrr

你需要错误的文件：require'./ public/style.scss' not'。/ public/style.css';你使用的是sass loader而不是css loader。 –

您需要组合ExtractTextPlugin和样式加载器。

module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'), 
     }, 
    ], 
} 

... 

plugins: [ 
    new ExtractTextPlugin(path.join(__dirname, 'public', 'style.css')), 
],

在我的工作CONFIGS，我也有解决可能无关项：

resolve: { 
    loaders: [ 
    { 
     test: /\.(css|scss)$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), 
    }, 
    ], 
},

其他错误可能是你如何将其纳入index.js。您正在使用require('./public/style.css')而不是require('./public/style.scss')。

来源

2016-03-15 16:22:45

Webpack只生成JS，没有来自SCSS的CSS文件

回答

相关问题