小编ex-*_*tly的帖子

我目前有一些反应组件和sass正在使用webpack成功构建.我还有一个主要的sass文件,使用gulp任务构建到css.

我只想使用其中一种技术,是否可以将sass编译为css,而无需在条目文件中对sass进行相关的需求？

这是尝试使用WebpackExtractTextPlugin的示例

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name]")
  ]

运行webpack后,style.css资产如下所示:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...

由于某些原因,尝试使用extract-text-webpack-plugin构建时此配置失败.我一直在尝试使用extract-text-webpack-plugin几天,并且在尝试输出css时遇到了很多问题.我觉得我在遵循了许多指南并查看了许多SO问题之后我已经正确配置了它,但也许我错过了一些东西......

webpack.config.js

var entry_object = {};
entry_object[build_js_dir + "file.js"] = static_js + 'file.js';
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]',
    chunkFileName: "[id].chunk.js"
  },
  module: {
    loaders: [{
      test: /\.js$/,
      include: path.resolve(__dirname),
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015']
      }
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract("css-loader!sass-loader")
    }
]}
  plugins: [
    new ExtractTextPlugin("[name].css"),
    ]
}

错误详情:

~/src/$ webpack --show-error-details
Hash: ab317ccc65911901bea4
Version: webpack 1.13.0
Time: 1032ms
                       Asset     Size  Chunks             Chunk Names
./static/build/js/file.js  51.7 kB       0  [emitted]  ./static/build/js/file.js
   [1] ./static/scss/style.scss …

我可以在同一个包中导入MyComponent并让它在页面上呈现,但是我无法链接或下载MyComponent包并导入组件.

的package.json:

{
  "name": "my-component",
  "version": "1.0.0",
  "main": "dist/index.js",
  "directories": {},
  "dependencies": {},
  "devDependencies": {
    "babel-loader": "^6.2.3",
    "babel-preset-es2015": "",
    "babel-preset-react": "",
    "css": "^2.2.1",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "node-sass": "^3.4.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "sass": "^0.5.0",
    "sass-loader": "^3.1.2",
    "style": "0.0.3",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/MyComponent.jsx',
  output: {
    path: './dist/',
    filename: './index.js'
  },
  module: {
    loaders: [{
      test: /\.jsx$/,
      include: path.resolve(__dirname),
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', …