Webpack只生成JS,没有SCSS的CSS文件

时间:2016-03-14 20:57:59

标签: javascript css sass webpack sass-loader

在我的项目中,我将Webpack与React和NodeJS一起使用。我想生成bundle.jsstyle.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 时,只会在./public地图中创建JS 文件:

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

以下示例/教程仅面向CSS文件,或明显的错误,如未实现ExtractText。 我还下载了包sass-loader node-sass。在一些例子中,我确实发现了包含的那些包,有些则没有。

编辑(需要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')
)

编辑(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)

2 个答案:

答案 0 :(得分:3)

确保您需要样式文件。 e.g。

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

我认为你也需要样式加载器 e.g。

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

这三个加载器执行以下操作

  1. 使用 sass loader
  2. 将您的scss文件转换为普通CSS
  3. 借助 CSS加载程序
  4. 解析imports中的所有url(...)sCSS
  5. 使用样式加载程序
  6. 将这些样式插入到页面中

答案 1 :(得分:0)

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

   ls -1tr /home/jdoe/checks/downloads/*.md5 | head -n -2 | while read f; do
     #rm -f "$f"
     print "file to delete is $f"
   done

在我的工作配置中,我还有一个可能无关紧要的条目:

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

...

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

另一个错误可能是您在resolve: { loaders: [ { test: /\.(css|scss)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), }, ], }, 中包含它的方式。您使用的是index.js而不是require('./public/style.css')