Webpack包括基礎框架和應用scss編譯爲css

我想將sass編譯添加到我的項目並編譯我的app.scss文件，其中包括基礎站點樣式。Webpack包括基礎框架和應用scss編譯爲css

我有項目結構是這樣的：

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

我通過NPM安裝基礎框架。我想在我的SCSS目錄，進口有基礎框架來創建app.scss文件和編譯這這是在我的應用程序的index.html

下面鏈接的CSS/app.css是我的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中正確包含這個過程。

許多非常感謝您的幫助。

來源

2017-02-22 Robson

你絕對是在正確的軌道上。首先，確保你安裝了一個版本的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 }), 
    ],

從這裏，你所要做的就是要求你的主scss文件在你的條目j中s文件，在你的情況下是index.js。事情是這樣的：

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

至於基礎方面我想看看這個https://www.npmjs.com/package/foundation-sites-loader。看起來很有希望。

來源

2017-02-22 13:37:45

Webpack包括基礎框架和應用scss編譯爲css

回答

相關問題