Question

所以我使用网络包，新的，这是我的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: [

    ]
}

file.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 console也找不到任何错误。但为什么scss不受影响，颜色不会改变，字体不会改变。

顺便说一下，我发现这个代码在“transiled”js，app.bundle.js：

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

请帮助

Answer 1

您正在使用两个加载程序配置来处理SASS文件：

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

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

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

更多信息here。

Sass没有使用webpack的效果

1 个答案: