diff --git a/package.json b/package.json index 5b02dee0..14711dcc 100644 --- a/package.json +++ b/package.json @@ -35,11 +35,17 @@ }, "homepage": "https://github.com/plangrid/react-file-viewer#readme", "devDependencies": { + "autoprefixer": "^7.1.0", "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", + "css-loader": "^0.28.1", "html-webpack-plugin": "^2.28.0", + "node-sass": "^4.5.3", + "postcss-loader": "^2.0.5", + "sass-loader": "^6.0.5", + "style-loader": "^0.17.0", "webpack": "^2.5.1", "webpack-dev-server": "^2.4.5" }, diff --git a/src/app.js b/src/app.js index f7e228ef..1e219040 100644 --- a/src/app.js +++ b/src/app.js @@ -1,9 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import FileViewer from './components/file-viewer.jsx'; +import "styles/main.scss"; ReactDOM.render( , document.getElementById('app') -); \ No newline at end of file +); diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 00000000..60f1eab9 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,3 @@ +body { + color: red; +} diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 69583cf6..0ea66ca6 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -1,5 +1,6 @@ const path = require("path"); const webpack = require("webpack"); +const autoprefixer = require("autoprefixer"); const HtmlWebpackPlugin = require("html-webpack-plugin"); @@ -34,6 +35,35 @@ module.exports = { cacheDirectory: true, }, }, + { + test: /\.(css|scss)$/, + use: [ + { + loader: "style-loader", + }, + { + loader: "css-loader", + }, + { + loader: "postcss-loader", + options: { + ident: "postcss", + plugins: () => [ + autoprefixer({ + browsers: [ + ">1%", + "last 4 versions", + "not ie < 9", + ], + }), + ], + }, + }, + { + loader: "sass-loader", + }, + ], + }, ], }, diff --git a/webpack.config.js b/webpack.config.js index b7359bd3..e51e7136 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,6 @@ const webpack = require('webpack'); const path = require('path'); +const autoprefixer = require("autoprefixer"); var BUILD_DIR = path.resolve(__dirname, './dist'); var APP_DIR = path.resolve(__dirname, './src'); @@ -11,15 +12,50 @@ var config = { filename: 'app.js' }, resolve: { + modules: [path.resolve(__dirname, "./src"), "node_modules"], extensions: ['.js', '.jsx', '.json'], }, module: { - loaders: [ - { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, - { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }, - { test: /\.html$/, loader: "file?name=[name].[ext]" }, + rules: [ + { + test: /\.(js|jsx)$/, + include: path.resolve(__dirname, "./src"), + loader: "babel-loader", + options: { + cacheDirectory: true, + }, + }, + { + test: /\.(css|scss)$/, + use: [ + { + loader: "style-loader", + }, + { + loader: "css-loader", + }, + { + loader: "postcss-loader", + options: { + ident: "postcss", + plugins: () => [ + autoprefixer({ + browsers: [ + ">1%", + "last 4 versions", + "not ie < 9", + ], + }), + ], + }, + }, + { + loader: "sass-loader", + }, + ], + }, ], }, }; -module.exports = config; \ No newline at end of file +module.exports = config;