Question

我想将sass编译添加到我的项目中并编译我的app.scss文件，包括基础网站样式。

我有这样的项目结构：

-frontend
   -node_modules
   -src
      -css
      -scss
      -js
      index.html
   package.json
   webpack.config.js

我用npm安装了基础框架。我想在我的scss目录中创建app.scss文件，导入基础框架并将其编译为css / app.css，该链接在我的应用程序index.html中

这是我的webpack配置：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/index.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "index.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

我在我的软件包中安装了sass-loader，style-loader和css-loader，但我不知道如何在webpack中正确包含这个过程。

很多人都感谢你的帮助。

Answer 1

你肯定是在正确的轨道上。首先，请确保安装了sass库的版本。我个人使用node-sass和webpack项目。更多信息here。关于node-sass。

另外，为了将scss编译为css文件夹，您需要使用webpack extract-text-webpack-plugin，info here。

要求配置顶部的插件：

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

安装好插件后，可以使用如下设置加载程序：

 module: {
    loaders: [
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
          }
        },
        { 
         test: /\.scss$/, 
         loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"),
        }
     ]
   },

你的插件是这样的：

  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin("./css/[name].css"),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ],

从这里开始，您只需要在条目js文件中使用主scss文件，在您的情况下是index.js。像这样：

require('./path/to/app.scss');

至于基础方面，我会研究这个https://www.npmjs.com/package/foundation-sites-loader。看起来很有希望。

Webpack包括基础框架和app scss编译到css

1 个答案: