筆記如何用 Webpack 來使用 sass
1.先clone /react-transform-boilerplate 到自已的電腦
2.npm i -D style-loader css-loader autoprefixer-loader sass-loader(若安裝 sass-loader不成功需加裝 node-sass)
3.在webpack.config.dev.js下 module後面新增 (表示找到以.scss結尾的文件後,會以以下loader處理)
module: { loaders: [ { test: /\.scss$/, loader: 'style!css!autoprefixer!sass' }, ] }
此區塊的代碼完整如下:
module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ 'eventsource-polyfill', // necessary for hot reloading with IE 'webpack-hot-middleware/client', './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [{ test: /\.js$/, loaders: ['babel'], include: path.join(__dirname, 'src') }, { test: /\.scss$/, loader: 'style!css!autoprefixer!sass' }] } };
4.新增 style/main.scss來測試
添加樣式測試一下sass的嵌套和autoprefixer是否成功
5.到App.js導入main.scss,填上完整路徑 (ES6模塊的語法使用 import的方式)
import ‘./style/main.scss’;
6.npm start
啟動瀏覽器到 localhost:3000 查看是否成功