Sass 使用 webpack 没有效果答案

【问题标题】：Sass have no effects using webpackSass 使用 webpack 没有效果
【发布时间】：2017-01-12 17:35:58
【问题描述】：

所以我使用 web pack，这是新的，这是我的 package.json

{
  "name": "postronix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "css-loader": "^0.24.0",
    "node-sass": "^3.9.0",
    "sass-loader": "^4.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.13.0",
    "jquery": "^3.1.0"
  }
}

webpack.config.js：

const webpack = require('webpack');

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
        }
        ]
    },
    plugins: [

    ]
}

文件.scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

ul {

  font: 100% $font-stack;
  color: $primary-color;
  background-color: #282828;
}

app.js：

 var css = require("!css!sass!./file.scss");
 import 'babel-polyfill';
 import cats from './cats';
 import $ from 'jquery';

 $('<h1>Cats</h1>').appendTo('body');
 const ul = $('<ul></ul>').appendTo('body');
 for (const cat of cats) {
     $('<li></li>').text(cat).appendTo(ul);
 }

index.html:

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
     </head>
     <body>
         <script src="bin/app.bundle.js" charset="utf-8"></script>
     </body>
 </html>

在 cli 中执行“webpack”后，它没有显示任何错误， chrome 控制台也没有发现任何错误。但是为什么scss不受影响，颜色不变，字体不变。

顺便说一句，我在“转译”js app.bundle.js 中找到了这段代码：

exports.push([module.id, "ul {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n  background-color: #282828; }\n", ""]);

请帮忙

【问题讨论】：

尝试只调用'require'而不将其分配给css变量。

标签： javascript node.js sass ecmascript-6 webpack

【解决方案1】：

您正在使用两种加载器配置来处理 SASS 文件：

webpack.config.js (loaders: ["style", "css", "sass"]) 中的那个
JS文件中的一个：require("!css!sass!./file.scss")

后者似乎优先，但不包括style 加载器，它是将<style> 元素插入HTML 的加载器。没有它，您需要以某种方式手动将样式注入 HTML。

最简单的解决方案就是使用require('./file.scss')

更多信息here。

【讨论】：

好的，谢谢！